0

悬停类 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();

});

请提出一些建议。谢谢

4

3 回答 3

1

您将鼠标悬停在结果 div 上。并且所有描述跨度都是该 div 的子级。这就是为什么所有人都出现了。

试试这个

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

});

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

于 2013-04-22T04:21:33.390 回答
1

检查这个： -Demo

Refer Toggle

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

 jQuery("div.prod", "div.results").hover(function () {
     jQuery(this).find(".prod_desc").toggle();
 });
于 2013-04-22T04:29:39.583 回答
0

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

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

});

小提琴

于 2013-04-22T04:30:48.950 回答