鼠标输出对选定项目的影响

Question

我有一个产品项目，当它被选中/取消选择时会产生一些效果。我是通过点击选择的类进行切换的，如下所示：

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

现在，在选择项目时，当光标离开项目时，我还需要应用一组效果。

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

Answer 1

您可以为此使用mouseleave，然后只需检查元素是否具有所需的类。

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

Answer 2

选择具有类.myItem的.selected元素，并在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/