Question

http://jsfiddle.net/yZSEA/

$("p").hover(function() {
    var $this = $(this).find('span');
    $this.show();
}, function() {
    $this.hide();
});

我不想使用mouseenter和mouseleave来避免丑陋的代码，上面的想法是在jquery文档中给出的，逻辑上它很好但是mouseleave部分不起作用

Answer 1

你的mouseleave函数中没有定义$this而你的代码正在抛出：

未捕获的ReferenceError：$ this未定义

只需在mouseleave函数中重复var $this声明：

$("p").hover(function(){
    var $this = $(this).find('span');
    $this.show();
}, function(){
    var $this = $(this).find('span');
    $this.hide();
});

Working JSFiddle demo

Answer 2

那是因为mouseleave处理程序的上下文中的$this是undefined，你还应该在该处理程序中定义变量。

您还可以使用on和toggle方法（，如果它不丑陋）：

$("p").on('mouseenter mouseleave', function(e) {
    $('span', this).toggle(e.type === 'mouseenter');
});

Answer 3

您的mouseout范围中未声明

$this。只需在鼠标移出处理程序中再次执行.find调用：

$("p").hover(function(){
    $(this).find('span').show();
        }, function(){
            $(this).find('span').hide();
    }
);

Answer 4

当鼠标发生时再次添加var $this = $(this).find('span');

$("p").hover(function(){
var $this = $(this).find('span');
$this.show();
    }, function(){
        var $this = $(this).find('span');
        $this.hide();
});

Answer 5

$("p").hover(function(){
    var $this = $(this).find('span');
    $this.show();
        }, function(){
            var $this = $(this).find('span');
    $this.hide();
    }
);

Answer 6

将$ this添加到您的休假功能中：

$("p").hover(function(){
        var $this = $(this).find('span');
        $this.show();
    }, function(){
           var $this = $(this).find('span');
           $this.hide();
    }
);

Answer 7

 $('p').hover(function() {
       $(this).find('span').show();

             },function() {

    $(this).find('span').hide();
   });

Demo

悬停不适用于mouseleave

7 个答案: