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

Posted 2023-03-06

【中文标题】通过 jQuery/Javascript 添加悬停 CSS 属性

【英文标题】：Adding hover CSS attributes via jQuery/Javascript

【发布时间】：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）。因此，应使用提供的其他答案中的解决方法。

【参考方案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 卡住。