Question

我有一个下拉条纹和帖子的标题。当鼠标光标仅显示在一个元素上时 - 所有元素都变为活动状态。为什么会这样，以及如何只发一个帖子是活跃的。例如：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; ?>

Answer 1

$(".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'
});  
});

Answer 2

.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'
});  
});

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

2 个答案: