jquery enable :hover of div on other div mouseover答案

【问题标题】：jquery enable :hover of div on other div mouseoverjquery enable :hover of div on other div mouseover
【发布时间】：2015-04-27 14:18:11
【问题描述】：

我需要 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>

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

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

【问题讨论】：

你没有在你的 jsfddle 中启用 jquery
你有什么问题？
FIDDLE 已更新...我需要在 [css] 上触发：当鼠标悬停在 '.ms-thumb-desc' 上时，类 '.ms-thumb-hover' div 的悬停动作
您能解释一下您为什么要这样做吗？你想要的只是在悬停另一个 div 时使一个 div 变为红色。为什么这对你不起作用？为什么你需要调用另一个 div 的悬停？有什么意义？
好的，如果不知道怎么做的话......谢谢你的时间

标签： jquery hover mouseevent mouseover

【解决方案1】：

您不能使用 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 了解有关可信事件的说明。

【讨论】：

非常感谢...您的回答很有帮助...非常感谢您的解释
这能回答你的问题吗？
是的，因为它解释了我必须使用toggleClass而不是我想的“hover()”
很高兴听到这个消息！请接受答案，以便其他用户可以看到您的问题已得到解决。

【解决方案2】：

$('.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/

【讨论】：

悬停动作，不是css改变
@X9DESIGN 什么意思？
我需要切换 :hover of '.ms-thumb-hover' div 但是当鼠标在 '.ms-thumb-desc' 上时
@X9DESIGN 你为什么要这么做？
因为......我不明白你的问题......你知道怎么做吗？

【解决方案3】：

您也可以完全不使用 JS，方法是定位父级然后擦除子级：

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

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

【讨论】：

【解决方案4】：

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

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

别忘了在 jsfiddle 中添加库。

【讨论】：

我没有写任何关于 css 更改的内容...阅读整个帖子，不要只看代码