Question

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

我们可以使用

应用通常的CSS样式

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

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

我们是否必须诉诸：

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

Answer 1

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

$("#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

您应该将它们放在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中使用这些类，您应该尽可能多地拆分语言。

Answer 4

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

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

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

4 个答案: