Добавление атрибутов hover CSS с помощью jQuery/Javascript

Некоторые стили CSS должны применяться к элементу при наведении, а стили 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') }
)

Ответы

Ответ 1

Я нахожу использование mouseenter и mouseleave лучше, чем наведение. Там больше контроля.

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

Ответ 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()

Ответ 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, вы должны разделить языки как можно больше.