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

Question

有些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') }
)

- Nyxynyx

---

查看 jQuery 中的 .hover() 方法。http://api.jquery.com/hover/ - Felipe Oriani

为什么不使用jQuery的hover事件或onmouseover和onmouseout来添加和删除类呢？ - Jon Taylor

你想让元素在鼠标移开时消失吗？那你又该如何再次将鼠标悬停在它上面呢？ - Alnitak

@Alnitak 说得好，我随意选择了 display 属性，可能不是一个好的例子 :) - Nyxynyx

只是想澄清一下。如果我理解正确，原始问题并不是如何在悬停/移开时触发jQuery事件，而是如何使用特定的CSS属性等来装饰元素的悬停样式。然而这是不可能的，请参见此处的更多细节：（jQuery Bug跟踪器：通过jQuery访问元素的:HOVER CSS属性：http://bugs.jquery.com/ticket/4434）。 因此，应该使用其他答案中提供的解决方法。 - mPrinC

Answer 1

我发现使用mouseenter和mouseleave比hover更好。这样可以获得更多的控制。

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

- Jon

---

能详细说明一下“有更多的控制”这个说法吗？据我所知，.hover()函数只是一个缩写，用于精确执行您编写的代码。 - Anthony Grist

我喜欢它明确地说明了“鼠标进入元素”和“鼠标离开元素”的含义。然而，这个页面上的图表表明，就性能优化而言，live mouseenter/mouseleave 是最佳选择。http://jsperf.com/hover-vs-mouseenter - Jon

@Jon 很棒的回答，非常有用，谢谢。还有一件事，您忘记了 mouseleave 函数的十六进制颜色代码上的 "#" 哈希符号，这是该代码片段工作所必需的。 - Mickey Vershbow

Answer 2

试试这个：

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

或者使用类

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

更多信息在这里，以及.toggleClass()

- Mark Walters

Answer 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中使用这些类，您应该尽可能地分离语言。

- Wouter J

Answer 4

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

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

- Laz Karimov

---

这会导致CSS在您移开鼠标后仍保持不变。 - Moss