Question

在盘旋div.results时，我想显示span.prod_desc以显示

我怎样才能做到这一点。

<div class="results" style="width: 600px;">

<div class="prod" style="width: 265px;border: 1px solid black;float: left;margin-right: 20px;margin-bottom: 5px;position: relative;">
<span class="prod_que" style="padding-top: 10px;padding-left: 5px;padding-bottom: 10px;">Question</span>
<span class="prod_desc" style="position: absolute;display:none;">Hello World</span>
</div>

<div class="prod" style="width: 265px;border: 1px solid black;float: left;margin-right: 20px;margin-bottom: 5px;position: relative;">
<span class="prod_que" style="padding-top: 10px;padding-left: 5px;padding-bottom: 10px;">Question</span>
<span class="prod_desc" style="position: absolute;display:none;">Hello World</span>
</div>

</div>

我绑了这个，但它在悬停时显示所有内容，我只想显示当前悬停的元素。

    jQuery("div.results").hover(function()
{
    jQuery(this).find(".prod_desc").show();
    },
    function(){
    jQuery(this).find(".prod_desc").hide();

});

请提出建议。感谢

Answer 1

你绑定悬停在结果div上。所有描述跨度都是该div的子节点。这就是为什么所有人都出现了。

试试这个

jQuery("div.results > .prod").hover(
function(){
    jQuery(this).find(".prod_desc").show();
},
function(){
    jQuery(this).find(".prod_desc").hide();

});

我希望这会有所帮助，它会显示当前悬停的div的描述。

Answer 2

检查： - Demo

Refer Toggle

这使用div.results作为上下文元素。

 jQuery("div.prod", "div.results").hover(function () {
     jQuery(this).find(".prod_desc").toggle();
 });

Answer 3

由于.prod_desc不是.results的直接子项，因此在应用.prod之前，您需要先使用children()查找所有find div：

jQuery("div.results").hover(function()
{
    jQuery(this).children('.prod').find(".prod_desc").show();
    },
    function(){
    jQuery(this).children('.prod').find(".prod_desc").hide();

});

<强> FIDDLE

如何使用jquery悬停此关键字来仅显示当前选定的元素

3 个答案: