通过jQuery / JavaScript的添加悬停CSS属性(Adding hover CSS a

有些CSS样式需要被应用到悬停的元素，CSS样式具有直接而不是使用JavaScript / jQuery的通过样式表或应用$(this).addClass('someStyle')因为我注入DOM元素到另一个页。

我们可以通过应用通常的CSS样式

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

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

---

难道我们不得不诉诸：

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

Answer 1:

我发现使用的mouseenter和鼠标离开比悬停更好。 还有更多的控制。

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

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');
});

这里更多信息.hover（）和.toggleClass（）

Answer 3:

你应该把它们放在一个悬停事件：

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使用这些类，你应该分裂，你可以尽可能多的语言。

Answer 4:

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

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

文章来源: Adding hover CSS attributes via jQuery/Javascript