当鼠标光标只显示在一个元素上时，为什么要使用所有元素?

Why are utilized all the elements when the mouse cursor is shown on only one element?

本文关键字：元素 为什么 一个 显示 光标 鼠标      更新时间：2023-09-26

我有一个带标题的下拉条纹。当鼠标光标仅显示在一个元素上时，所有元素都变为活动状态。为什么会发生这种情况，以及如何使只有一个帖子是活跃的。例如:http://beardhouse.com.ua/

//post-description slide
$(".contant").hover(function(){
$(".post-description").css({
    'left': '-5px',
    '-webkit-transition-duration': '0.3s',
    '-moz-transition-duration': '0.3s',
    '-o-transition-duration': '0.3s',
    'transition-duration': '0.3s',
});
},function(){
$(".post-description").css({
    'left': '-120px',
    '-webkit-transition-duration': '0.3s',
    '-moz-transition-duration': '0.3s',
    '-o-transition-duration': '0.3s',
    'transition-duration': '0.3s'
});  
});

==================================================================================

        <?php if(have_posts()) : ?> 
        <?php while(have_posts()) : the_post(); ?> 
              <div class="col-lg-3">
                  <div class="stripe_part"><img src="http://beardhouse.com.ua/wp-content/themes/arbion/images/stripe_left.png"></div>
                  <div class="contant">
                   <div class="post-description"><a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a></div>
                   <a href="<?php the_permalink(); ?>"><img src="<?php echo first_image() ?>"title="<?php the_title(); ?>"  /></a></div> <!-- /take a first image from the post -->           
              </div>
        <?php endwhile; ?>
        <?php endif; ?>


.post-description将匹配所有具有类后描述的元素。您只希望对悬停在其上的项的子元素执行效果。所以把选择器改成:

$(this).find(".post-description")

那么你的整个代码就是:

//post-description slide
$(".contant").hover(function(){
$(this).find(".post-description").css({
    'left': '-5px',
    '-webkit-transition-duration': '0.3s',
    '-moz-transition-duration': '0.3s',
    '-o-transition-duration': '0.3s',
    'transition-duration': '0.3s',
});
},function(){
$(this).find(".post-description").css({
    'left': '-120px',
    '-webkit-transition-duration': '0.3s',
    '-moz-transition-duration': '0.3s',
    '-o-transition-duration': '0.3s',
    'transition-duration': '0.3s'
});  
});

$(".contant").hover(function(){
$(this).find(".post-description").css({
    'left': '-5px',
    '-webkit-transition-duration': '0.3s',
    '-moz-transition-duration': '0.3s',
    '-o-transition-duration': '0.3s',
    'transition-duration': '0.3s',
});
},function(){
$(this).find(".post-description").css({
    'left': '-120px',
    '-webkit-transition-duration': '0.3s',
    '-moz-transition-duration': '0.3s',
    '-o-transition-duration': '0.3s',
    'transition-duration': '0.3s'
});  
});
相关文章：