对选定项目的鼠标移出效果

Question

我有一个产品项目在选择/取消选择时会获得一些效果。 我这样做，通过切换和关闭选择类上点击，这样的：

$('.myItem').click(function() { 
    $(this).toggleClass('selected'); 
}) 

现在，我还需要当光标离开项目申请一堆效果，同时该项目被选中。

我试图在很多方面达到此目的，但没有成功。什么是实现这一目标的正确方法？

Answer 1

您可以使用鼠标离开了这一点，那么你只需要检查，如果该元素你想要的课程。

$('.myItem').mouseleave(function() { 
    if($(this).hasClass('selected') 
    { 
     //Do effects 
    } 
}); 

Answer 2

选择具有.selected类.myItem元素和执行你想要的功能上mouseleave

$(document).on('mouseleave', '.myItem.selected', function() { 
 
    $(this).html('<h1 style="color:#fff;margin:0">Left from selected!</h1>'); 
 
}); 
 
$('.myItem').click(function() { 
 
    $(this).toggleClass('selected').empty(); 
 
})

.myItem { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: green; 
 
} 
 
.myItem.selected { background-color: red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<p>Click to toggle class "selected"</p> 
 
<div class="myItem"></div>

Answer 3

您必须添加一个检查选定的类，以及mouseleave事件。

实施例：

$('.myItem').click(function() { 
    $(this).toggleClass('selected'); 
}); 

$('.myItem').mouseleave(function() { 
    if ($(this).hasClass('selected')) { 
     // do animation 
     $(this).animate({ 
      fontSize: "+=10", 
      left: "+=50" 
     }); 
    } 
}); 

或添加事件的jQuery的方式：

$('.myItem').on('click', function() { 
    $(this).toggleClass('selected'); 
}); 

$('.myItem').on('mouseleave', function() { 
    if ($(this).hasClass('selected')) { 
     // do animation 
     $(this).animate({ 
      fontSize: "+=10", 
      left: "+=50" 
     }); 
    } 
}); 

http://jsfiddle.net/qn6zqqeh/1/