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"：

如果隐藏了无类别的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();    
    }
});

FIDDLE

根据事件选择父div中的特定div（悬停）

3 个答案: