在悬停时，仅显示具有公共类的子元素

Question

<div class="example">
 <div class="test" style="display:none;">Text</div>
</div>

<div class="example">
 <div class="test" style="display:none;">Some other text</div>
</div>

当一个包含example类的元素悬停在其上时，它会显示其子元素text（可能只有一个简单的.show()和.hide() jQuery的）。

我需要它只显示其子元素而不显示类test的其他元素。如何在不指定id s？

的情况下执行此操作

Answer 1

$("div.example").hover(function(){
    $(this).find("div.test").show();
},function(){
    $(this).find("div.test").hide();
});

希望你正在寻找这个。

您可以查看working demo

Answer 2

或者，you can even do it in CSS：

.test{                   //or .example .test {}
    display:none;
}

.example:hover .test{
    display:block;      //block or inline, your call
}