Question

我目前有一个包含几个使用相同类的div的div。它看起来像这样，

<div class="deck-content">
    <div class="deck-box">TEST
       <div class="deck-hidden">
          <span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"></span>
          <span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span>
          <span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
       </div>
    </div>
    <div class="deck-box">TEST
       <div class="deck-hidden">
          <span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"></span>
          <span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span>
          <span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
       </div>
    </div>
    <div class="deck-box">TEST
       <div class="deck-hidden">
          <span class="glyphicon glyphicon-eye-open eye-open" aria-hidden="true"></span>
          <span class="glyphicon glyphicon-pencil pencil" aria-hidden="true"></span>
          <span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
       </div>
    </div>
 </div>

当我将鼠标悬停在类名为deck-box的div上时，我希望类名deck-hidden的div可见。

问题是我不知道会有多少deck-box个div。所以我不能给他们所有不同的ID名称。

如何将鼠标悬停在deck-box上并让其各自的孩子deck-hidden可见？

Answer 1

您可以使用

.deck-box:hover .deck-hidden {
  display: block;
}

Answer 2

$('div.deck-box').hover(function(){
    $(this).children('div').show();
}, function(){
    $(this).children('div').hide();
})

jquery

Answer 3

来自Syahrul的回答＆＃39;是正确的方法。但是代表类名有一个错误，它不会像你期望的那样工作。＆＃39;。＆＃39;在子类名称之前丢失。正确的答案是，

.deck-hidden {
   display: none;    
}
.deck-box:hover .deck-hidden {
   display: block;
}

当鼠标悬停在父div上时显示子div - Javascript

3 个答案: