通过 jQuery/Javascript 添加悬停 CSS 属性答案

【问题标题】：Adding hover CSS attributes via jQuery/Javascript通过 jQuery/Javascript 添加悬停 CSS 属性
【发布时间】：2012-11-22 07:53:11
【问题描述】：

某些 CSS 样式需要在悬停时应用到元素，并且必须使用 javascript/jquery 直接应用 CSS 样式，而不是通过样式表或 $(this).addClass('someStyle')，因为我将 DOM 元素注入另一个页面。

我们可以使用常用的css样式

$('#some-content').css({
    marginTop: '60px',
    display: 'inline-block'
});

我们应该如何为:hover事件添加CSS样式？

我们必须求助于：

$('#some-content').hover(
       function(){ $(this).css('display', 'block') },
       function(){ $(this).css('display', 'none') }
)

【问题讨论】：

查看 jquery 中的.hover() 方法。 api.jquery.com/hover
为什么不根据jquery中的hover事件或者onmouseover和onmouseout来添加和移除一个类呢？
您希望元素在您将鼠标悬停离开时消失？你应该如何再次将鼠标悬停在它上面？
@Alnitak 好点，我随机选择了display 属性，可能不是一个很好的例子:)
只是为了澄清。如果我理解原始问题不是如何在悬停/hout 上触发 jQuery 事件，而是如何使用特定 CSS 属性等装饰元素的悬停样式。但是这是不可能的，请参阅这里有更多细节：（jQuery Bug 跟踪器：访问：通过 JQUERY 悬停元素的 CSS 属性：bugs.jquery.com/ticket/4434）。因此，应使用提供的其他答案中的解决方法。

标签： javascript jquery html css hover

【解决方案1】：

我发现使用 mouseenter 和 mouseleave 比悬停更好。有更多的控制权。

$("#somecontent").mouseenter(function() {
    $(this).css("background", "#F00").css("border-radius", "3px");
}).mouseleave(function() {
     $(this).css("background", "00F").css("border-radius", "0px");
});

【讨论】：

想详细说明“还有更多控制权”声明吗？据我所知，.hover() 函数只是精确执行您编写的代码的简写。
我只是喜欢它明确地说“鼠标进入元素”和“鼠标离开元素”。但是，此页面上的图表表明实时 mouseenter/mouseleave 在优化方面是最好的。 jsperf.com/hover-vs-mouseenter
@Jon 很好的答案，非常有用，谢谢。一件快速的事情，您忘记了 mouseleave 函数的十六进制颜色代码上的“#”哈希符号，这是该代码工作所必需的。

【解决方案2】：

试试这个：

$('#some-content').hover(function(){
    $(this).css({ marginTop: '60px', display: 'inline-block' });
}, function(){
    $(this).css({ //other stuff });
});

或使用类

$('#some-content').hover(function(){
    $(this).toggleClass('newClass');
});

更多信息在这里.hover()和.toggleClass()

【讨论】：

【解决方案3】：

您应该将它们放在hover 事件中：

var elem = $('#elem');

elem.hover(function () {
    // ... :hover, set styles
}, function () {
    // ... this function is called when the mouse leaves the item, set back the
    //     normal styles
});

但是，我完全建议将你的 CSS 放在类中并在 JS 中使用这些类，你应该尽可能多地拆分语言。

【讨论】：

【解决方案4】：

$("#someObj").hover(function(){
    $(this).css(...);
}:);

http://api.jquery.com/hover/

【讨论】：

这会在您将鼠标移开后导致 css 卡住。