jquery 启用 :hover of div on other div mouseover

Question

我需要 TOGGLE ：特定 div 的悬停动作，而且当鼠标光标悬停在其他 DIV

上时

  <div class="ms-thumb">
    <div class="ms-product-thumb">
        <div class="ms-thumb-hover">
            .ms-thumb-hover
        </div>
    </div>
    <div class="ms-thumb-desc">
        on this mouseover: make '.ms-thumb-hover' red!
    </div>
  </div>

jQuery

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

这里是 Fiddle : 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 强制元素状态，因为它不是受信任的事件。您必须创建悬停 class 并在元素上使用 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 启用 :hover of div on other div mouseover

jquery enable :hover of div on other div mouseover

jquery

mouseover

hover

mouseevent