通过 jQuery/Javascript 添加悬停 CSS 属性 [英] Adding hover CSS attributes via jQuery/Javascript

问题描述

Some CSS styles need to be applied to an element on hover, and CSS styles have to be applied using javascript/jquery directly and not through stylesheets or $(this).addClass('someStyle') because I am injecting the DOM elements into another page.

We can apply the usual css styles using

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

How should we add the CSS styles for :hover events?

---

Do we have to resort to:

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

解决方案

I find using mouseenter and mouseleave to be better than hover. There's more control.

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

这篇关于通过 jQuery/Javascript 添加悬停 CSS 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！