Question

我需要TOGGLE：特定div的悬停动作，但是当鼠标光标在其他DIV上时

<script>
$('.ms-thumb-desc').hover(function(){
    $('.ms-thumb-hover').hover();
});
</script>

的jQuery

<ul><li ng-repeat="p in providers">{{ p.$id }}</li></ul>

这是小提琴：http://jsfiddle.net/u4a1z3d2/3/

请解释为什么这个jQuery操作不起作用？

Answer 1

$('.ms-thumb-desc').hover(function () {
    $('.ms-thumb-hover').css("font-size", "1.5em");
    $('.ms-thumb-hover').css("color", "red");
    }, function () {
    $('.ms-thumb-hover').css("color", "black");
});

演示：https://jsfiddle.net/u4a1z3d2/1/

Answer 2

试试这个http://jsfiddle.net/u4a1z3d2/4/

$('.ms-thumb-desc').hover(function(){
    $('.ms-thumb-hover').css("background", "red");
}, function() {
    $('.ms-thumb-hover').css("background", "none");
});

并且不要忘记在jsfiddle中添加库。

Answer 3

您也可以通过定位父级然后删除子级来完成没有JS的操作：

.ms-thumb:hover .ms-product-thumb {
    color: red;
}
.ms-thumb .ms-product-thumb:hover {
    color: black;
}

http://jsfiddle.net/u4a1z3d2/5/

Answer 4

您不能使用jQuery强制元素状态，因为它不是受信任的事件。您必须创建一个悬停类并在元素上使用toggleClass

jQuery的：

$('.ms-thumb-desc').hover(function(){
    $('.ms-thumb-hover').toggleClass('hover');
});

CSS：

.ms-thumb-hover:hover, .ms-thumb-hover.hover {
    background-color: red;
}

http://jsfiddle.net/u4a1z3d2/6/

有关受信任事件的说明，请参阅this page。

jquery enable：将div悬停在其他div mouseover上

4 个答案: