显示隐藏的div

Question

HTML：

我有每个L1的UL列表counstructed这样的：

<li class="A">list-item 
    <div>1</div> 
    <div class="B">2 
     <div class="C">3</div> 
    </div> 

    </li> 

其中DIV C有CSS属性显示：无; 我写了这个JS：

$(".A").hover(function() { 
    $(".C").toggle(); 
    }); 

，显示李悬停隐藏层，但我想JS只在活跃的李项工作。 因此，当我悬停李项目它只显示该列表项隐藏div。

有什么建议吗？我是新的js，所以任何帮助将不胜感激thnx！

Answer 1

使用context可将查找缩小到所需元素的子元素。

$(".A").hover(function() { 
    $(".C", this).toggle(); 
}); 

Answer 2

尝试这样的事情，它会发现内this类C（这将是该元件徘徊）

$(".A").hover(function() { 
    $(this).find(".C").toggle(); 
}); 

Answer 3

使用hover()，hover功能的正确格式为：

$(".A").hover(
    function() { 
    // A function to execute when the mouse pointer enters the element. 
    $(this).find(".C").show(); 
    }, 
    function() { 
    // A function to execute when the mouse pointer leaves the element. 
    $(this).find(".C").hide(); 
    } 
);