38

一些 CSS 样式需要在悬停时应用于元素，并且 CSS 样式必须直接使用 javascript/jquery 应用，而不是通过样式表或$(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') }
)
4

4 回答 4

34

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

$("#somecontent").mouseenter(function() {
    $(this).css("background", "#F00").css("border-radius", "3px");
}).mouseleave(function() {
     $(this).css("background", "00F").css("border-radius", "0px");
});
于 2012-12-04T16:16:00.347 回答
19

尝试这个：

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

于 2012-12-04T16:16:55.677 回答
3

You should put them in a hover event:

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

However, I completely recommend to put your CSS in classes and use those classes in JS, you should split the languages as much as you can.

于 2012-12-04T16:17:37.563 回答
2 
$("#someObj").hover(function(){
    $(this).css(...);
}:);

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

于 2012-12-04T16:18:29.497 回答