javascript - 通过 jquery/javascript添加悬停CSS属性

  显示原文与译文双语对照的内容
0 0

一些CSS样式需要被应用到元素上hover时,和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') }
)
时间:原作者:9个回答

0 0

我发现使用mouseenter和mouseleave要比飞行。 有更多的控制。

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

请尝试以下方法:

$('#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( )

原作者:
0 0
$("#someObj").hover(function(){
    $(this).css(...);
}:);

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

原作者:
0 0

你应将它们放入悬停事件:

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中使用这些类,你应该分开做尽可能多的语言。

原作者:
...