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

一些CSS样式需要应用于悬停的元素，而CSS样式必须直接使用javascript/jquery应用，而不是通过样式表或

$（this）.addClass（'sometyle'）

，因为我正在将DOM元素注入另一个页面

我们可以使用

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

我们应该如何为

：hover

事件添加CSS样式

---

我们是否必须求助于：

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

---

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

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

试试这个：

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

或者使用类

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

更多信息请参见此处和

您应该将它们放在活动中：

var elem=$（'#elem'）；
元素悬停（函数（）{
//…：悬停，设置样式
}，函数（）{
//…当鼠标离开项目时调用此函数，将
//正常样式
});

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

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

---

查看jquery中的

.hover（）

方法。为什么不在jquery或onmouseover和onmouseout中基于悬停事件添加和删除一个类呢？您希望元素在离开它时消失吗？你应该如何再次悬停在它上面？@Alnitak很好，我随机选择了

display

attribute，可能不是一个好例子：）只是为了澄清一下。如果我理解了，最初的问题不是如何在hover/hout上触发jQuery事件，而是如何用特定的CSS属性等装饰元素的悬停样式。但这是不可能的，请参阅这里的更多详细信息：（jQuery Bug tracker:ACCESS:通过jQuery:）悬停元素的CSS属性）。因此，应该使用提供的其他答案中的变通方法。是否要详细说明“有更多的控制”语句？据我所知，

.hover（）

函数只是一个简写，用于精确地执行您所编写的代码。我只是喜欢它的明确性，即“鼠标进入元素”和“鼠标离开元素”。然而，本页上的图表表明，live mouseenter/mouseleave在优化方面是最好的。这会导致css在您移开鼠标后粘住。