Question

这真的不应该是这么复杂，但无法弄明白。

沿着正文内容部分左侧垂直放置几个标签。

在页面加载时，“leftKanji”css = display：none。想要当鼠标进入链接或“leftTab”类时，则“leftKanji”css = disply：block

目前所有“leftKanji”都显示或隐藏，而不是鼠标悬停在其上的那个。如果我可以为它添加“慢”或动画，那就是奖励。

HTML：

<script type="text/javascript" >
$(document).ready(function(){
    $('.leftTab').hover( function(){
      $(".leftKanji").css('display', 'block');
   },
   function(){
      $(".leftKanji").css('display', 'none');
   });
});
</script>
<div class="mainTabSection">
   <a href="#" class="leftTab">
     <div class="mainTab"><img src="../"  /></div>
     <div class="leftKanji"><img src="../"  /></div>
   </a>
</div>

<div class="mainTabSection">
   <a href="#" class="leftTab">
     <div class="mainTab"><img src="../"  /></div>
     <div class="leftKanji"><img src="../"  /></div>
   </a>
</div>

Answer 1

$(document).ready(function(){

    $(".leftKanji").css('display', 'none');

    $('.leftTab').hover( function(){
      $(".leftKanji").fadeIn('slow');
    },function(){
      $(".leftKanji").fadeOut('slow');
    });

});

Answer 2

当你说$（'。leftKanji'）时，你引用该类的所有元素。下面的代码将获取作为.leftTab元素的子元素的元素。你可以将.children（）更改为jQuery api中的遍历选择器中的任何一个，但我使用那个作为示例。但重要的是使用$（this），因为它与悬停的元素相对应。

$(document).ready(function(){
    $('.leftTab').hover( function(){
      $(this).children(.leftKanji').css('display', 'block');
   },
   function(){
      $(this).children(.leftKanji').css('display', 'none');
   });
});

您可能也会执行以下操作：

$('.leftKanji', $(this)).css('display', 'block')

或

$('.leftKanji', this).css('display', 'block')

虽然我现在还记不起确切的语法。

http://api.jquery.com/category/traversing/

Answer 3

或

 $(document).ready(function() {

            $(".leftKanji").hide();
            $('.leftTab').hover( function(){
                $(".leftKanji").hide();
                $(this).children().next(".leftKanji").show();
            });
        });

Jquery帮助左选项卡菜单

3 个答案: