jquery - 根据事件（悬停）在父 div 中选择特定 div

Question

所以，我有一个父 div，有 7 个子 div。这 7 个 div 中的每一个都是一个容器，将在悬停或单击时切换。如何将事件附加到 7 个 div 之一，以便仅显示其内容？现在，如果我将鼠标悬停，则会显示所有 div 的内容。我需要悬停并只显示悬停的 div 的内容。

$('div#HoldsAll').on('hover', function(){
$('div.none').show();
});

<div id="HoldsAll">

<div class="none">
<p>A hover over this parent div should display only this</p>
<p>and this</p>
<p>and this too</p>
</div>
<div class="none">
<p>This should remain hidden</p>
</div>
<div class="none">
<p>This should remain hidden, too</p>
</div>

Answer 1

您应该对一个唯一元素仅使用一个唯一 ID，请使用class="none"：

如果具有 none 类的 div 的内容隐藏在没有悬停的元素中，请尝试以下操作：

CSS：

.none p {display: none;}
span {color: red}

HTML：

<div id="HoldsAll">

<div class="none">
 <span>show</span>    
 <p>A hover over this parent div should display only this</p>
 <p>and this</p>
 <p>and this too</p>
 </div>

 <div class="none">
 <span>show</span>    
 <p>This should remain hidden</p>
 </div>

 <div class="none">
 <span>show</span>    
 <p>This should remain hidden, too</p>
 </div>

</div>    

jQuery：

 $(function () {            
   $('.none').hover(function () {
      $(this).find("p").show();
   }, function () {
      $(this).find("p").hide();
   });
});

http://jsfiddle.net/faNtu/

Answer 2

您有重复的 ID ( id="none")，这是不允许的，并且可能导致意外行为，例如您在此处看到的内容。

Answer 3

好吧，你需要一些东西来让它工作，所以你.none需要一个实际的大小才能让你的小鼠标指针在它上面，但可能是这样的：

$('.none', '#HoldsAll').on({
    mouseenter: function() {
        $('p', this).show();
    },
    mouseleave: function() {
        $('p', this).hide();    
    }
});​

小提琴