Question

好的，这就是我想要做的。我有一个DIV框，子元素设置为DISPLAY：NONE;。我正在尝试使用Jquery，以便当鼠标进入父DIV框时，子元素变为可见，然后在鼠标离开父DV时隐藏。页面上将有多个div与这些类。由于某种原因，它不起作用。有任何想法吗？这是我的代码：

HTML：

<div class="parent">  
     <span class="handle" style="display: none;">My Handle</span>
     <p>Child Text</p>
</div>

使用Javascript：

$(document).ready(function () {
    $('.parent').mouseenter(function(){
        $(this).next('.handle').show();
    });
    $('.parent').mouseleave(function(){
        $(this).next('.handle').hide();
    });
})

Answer 1

改为使用find：

$(document).ready(function () {
    $('.parent').mouseenter(function(){
        $(this).find('.handle').show();
    });
    $('.parent').mouseleave(function(){
        $(this).find('.handle').hide();
    });
})

甚至更好，试试这个：

$(document).ready(function () {
    $('.parent').hover(function(){
        $('.handle', this).show();
    },
    function(){
        $('.handle', this).hide();
     });
   );
})

Answer 2

你可以在没有jQuery的情况下实现你的目标：

 .parent .handle{  
    display:none;  
 }  
 .parent:hover .handle{
    display:inline;
 }

<div class="parent">  
   <span class="handle">My Handle</span>
   <p>Child Text</p>  
</div>

你应该只使用CSS，因为它不需要Javascript。

经过测试的FF和Safari

Answer 3

我建议您使用hover。这意味着您只需运行一次查询。

$('div.parent').hover(
    function () {
        $(this).children('span.handle').show();
    },
    function () {
        $(this).children('span.handle').hide();
    }
);

Answer 4

请尝试此操作：

$(document).ready(function () {
    $('.parent').mouseenter(function(){
        $(this).next('.handle').show();
    }).mouseleave(function(){
        $(this).next('.handle').hide();
    });
})

使用Jquery在悬停时更改不同的类显示

4 个答案: