Javascript 模拟“悬停”触发 CSS 属性答案

【问题标题】：Javascript simulate "hover" triggering CSS propertiesJavascript 模拟“悬停”触发 CSS 属性
【发布时间】：2013-11-14 22:48:55
【问题描述】：

我有一个菜单列表，当我将鼠标悬停在它上面时，项目会改变颜色。我也有一张我想悬停在上面的图片，并且列表中的元素会突出显示（因为我会直接将鼠标悬停在它们上面）。

我不知道如何通过 JS 触发它 - 我考虑过模拟将鼠标悬停在列表中的确切项目上。

代码如下：

CSS类

    #przyciski a:hover
    {
     color:orange;
     text-decoration:none;
     cursor: hand;
    }

HTML 代码：

    <img src="img/kwadrat.jpg"  
    onCLick=""
    onmouseover="someFunction('itemFromTheList')"/>

如果有人能分享一些想法，我将不胜感激。

【问题讨论】：

JavaScript 无法触发悬停。为什么 CSS 不能反映你在做什么？为类添加新规则，切换类。
你的例子很不完整。你应该发布一个 JSFiddle 给我们一些工作。您的意图是当鼠标悬停在您的链接上时，可能会切换另一个元素的背景颜色。
How to force a hover state with jQuery? 的可能重复项
为什么不能使用：#przyciski img:hover（虽然IE7不支持）
:hover 未激活的示例：如果您有一个可拖动元素，在鼠标按下时创建，然后在拖动结束时，:hover CSS 不会应用于该元素，直到您将鼠标移出然后再回来。我意识到这有点小众，但当它发生时，真的很痛苦！

标签： javascript css hover

【解决方案1】：

添加另一个与 :hover 相同的 CSS 规则，但对于一个类，比如 '.hover'

#przyciski a:hover,  #przyciski a.hover
{
 color:orange;
 text-decoration:none;
 cursor: hand;
}

说你有图片

<img src="img/kwadrat.jpg"/>

将处理程序添加到鼠标悬停/鼠标悬停事件以在您的 ancor 上触发类

$('img').on('mouseover', function () {
   $('#przyciski a').addClass('hover')
})

$('img').on('mouseout', function () {
   $('#przyciski a').removeClass('hover')
})

更新：

这也有简写：

$('img').hover( handlerIn, handlerOut )

和

$( 'img' ).hover( handlerInOut)

所以你可以做一个单行：

$('img').hover($('#przyciski a').toggleClass.bind('hover'))

【讨论】：