文本和填充区域上的jQuery鼠标悬停不起作用

文本和填充区域上的jQuery鼠标悬停不起作用,jquery,mouseover,Jquery,Mouseover,我有一个wordpress博客,在循环中,布局就像左边的文本(Title.date,summary),图像向右浮动(向左填充50%),我想让左边有50%的空间,这个上面的所有元素(Title.date,summary)都可以悬停(悬停在左边区域时,让所有文本颜色变为黑色,背景变为#ff7f00;) 后ut的CSS .post-ut { display:block; color:#999999; z-index:2; float:left; lette

我有一个wordpress博客,在循环中,布局就像左边的文本(Title.date,summary),图像向右浮动(向左填充50%),我想让左边有50%的空间,这个上面的所有元素(Title.date,summary)都可以悬停(悬停在左边区域时,让所有文本颜色变为黑色,背景变为#ff7f00;)

后ut的CSS

  .post-ut {
    display:block;
    color:#999999; 
    z-index:2;
    float:left;
    letter-spacing:1px;
    font-size:13px;
    position: relative;
    width:282px;
}
.post-ut a {
    max-width:74px;
    min-width:74px;
    text-decoration:none;
    color: #999999;
    display:inline-block;
    z-index:1;
}

下面是我正在使用的jQuery代码的想法,它不起作用

    $('div.post-ut').mouseover(function() {


    $('.entry-summary p', $(this).parent())
       .css("color","black")
       .css("background","#ff7f00");

});

$('div.post-ut').mouseout(function() {

    $('.entry-summary p', $(this).parent())
       .css("color","white")
       .css("background","black");

});
wordress post循环的php代码是

<h1 class="thumb" style="z-index:2; width:252px;">
                    <a style="padding:15px 15px 5px 15px; width:252px; font-size:30px; font-weight:100; " href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', UT_THEME_NAME ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>

                </h1>

               <br/>

                <div class="post-ut" style="margin-top:-43px;"> 
            &nbsp;&nbsp;&nbsp;&nbsp;<?php the_time('d. m. Y, g:i') ?> | <?php lambda_posted_in(); ?>                            
                </div> <!-- post by -->

            </header>

        <?php 

            echo '<div class="thumb" style="width:282px; padding-left:282px; margin-top:-114px; margin-bottom:20px; "><div class="post-image"><div class="overflow-hidden imagepost">';
            echo '<img class="wp-post-image"  style="display:inline-block; width:282px; height:272px;" src="'.$url.'" />';
            echo '<a title="'.get_the_title().'" href="'.get_permalink().'"><div class="hover-overlay"><span class="circle-hover"><img src="'.get_template_directory_uri().'/images/circle-hover.png" alt="'.__('link icon',UT_THEME_INITIAL).'" /></span></div></a>';
            echo '</div></div></div>';

        endif; ?>

        <div class="entry-content clearfix">



        <div class="entry-summary">

            <?php if ( is_archive() || is_search() || get_option_tree('excerpt_blog') == 'yes') : 

                the_excerpt(); 

            else : 
         ?>
           <?php endif; ?>   

        </div><!-- .entry-summary -->

        </div><!-- .entry-content -->
}))


更新:删除后位置:相对;在类post ut中,悬停有效,但文本不可见

从代码中删除p并检查

$('div.post-ut').mouseover(function() {

$('.entry-summary', $(this).parent())
   .css("color","black")
   .css("background","#ff7f00");

});

$('div.post-ut').mouseout(function() {

$('.entry-summary', $(this).parent())
   .css("color","white")
   .css("background","black");

});

“我使用的jQuery代码不起作用”什么不起作用?有错误吗?是的,当我将日期悬停在-->(.post ut)上时,什么都没有发生,背景或颜色没有变化(.entry summary p)我在你发布的代码中看不到,但我不知道php函数返回的是什么。\u extract()返回博客摘要,所以你必须使用:$('.entry summary.p',$(this.parent())谢谢,我试过了,但没用,当我悬停在柱子上时,什么也没发生;在PostUT类的css中,将日期区域悬停可以工作,但文本不会显示
$('div.thumb').mouseout(function() {

    $('a', $(this).parent())
       .css("color","white")
       .css("background","black");

    $('.post-ut', $(this).parent())
       .css("color","white")
       .css("background","black")
       .find('a').css("color","white");

    $('.entry-summary p', $(this).parent())
       .css("color","white")
       .css("background","black");

});
$('div.post-ut').mouseover(function() {

$('.entry-summary', $(this).parent())
   .css("color","black")
   .css("background","#ff7f00");

});

$('div.post-ut').mouseout(function() {

$('.entry-summary', $(this).parent())
   .css("color","white")
   .css("background","black");

});