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

我目前有一个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:hover .deck-hidden {
  display: block;
}

你可以用

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

与

对于
“Syahrul”的回答是正确的方法。但是在表示类名时有一个错误，它不会像您预期的那样工作。子类名称前缺少“.”。
正确答案是,

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

“Syahrul”的答案是正确的方法。但是在表示类名时有一个错误，它不会像您预期的那样工作。子类名称前缺少“.”。
正确答案是,

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

这很有效。我不知道它可以用css来完成！实际上，我必须在
隐藏组
前面添加一个
，它才能工作。我不知道它可以用css来完成！实际上，我必须在
隐藏组
前面添加一个
，它才能工作。