Удалить css: атрибут hover с помощью jquery

Скажем, у меня

<style>
    #container:hover{background:red}
</style>
<div id="container"><input type="submit"></div>

Когда я нахожусь на submit, #container по-прежнему остается красным. Могу ли я удалить это: наведите указатель мыши на ввод курсора с помощью jquery? Я не хочу менять bg $('#container').css('backgroundColor','color'), мне нужно что-то вроде $('#container').removeAttr('hover').

ОТВЕТЫ

Ответ 1

К сожалению, невозможно управлять псевдоклассами CSS с помощью jQuery.

Я предлагаю вам манипулировать классами следующим образом:

<style>
    .red:hover{background:red}
</style>

<div id="container" class="red"><input type="submit"></div>

<script>
    $("#container").removeClass("red");
</script>

Ответ 2

Вы не можете удалить правила псевдокласса, но вы можете переопределить их с привязками событий:

$("#container").on('mouseover', function () {
   $(this).css('background', 'blue');
}).on('mouseout', function () {
   $(this).css('background', whateverItIsNormally);
});

Ответ 3

Это может быть немного запутанным и, безусловно, может использовать оптимизацию, но вы можете использовать комбинацию вещей, опубликованных до сих пор:

jsFiddle: http://jsfiddle.net/psyon001/Vcnvz/2/

<style>
    .red{background:red;}
</style>

<div id="container"><input type="submit"></div>

<script>
$('#container').on({
    'mouseenter' : function(){
        $(this).addClass('red');
    },
    'mouseleave' : function(){
        $(this).removeClass('red');
    }
});
$('#container').find('input').on({
    'mouseenter' : function(){
        $('#container').removeClass('red');
    },
    'mouseleave' : function(){
        $('#container').addClass('red');
    }
})
</script>

Ответ 5

Я применил это:

element.click(function(){
  element.hover(
    function(){
     element.css('background-color', '');
     element.css('color', '');
  },
    function(){
     element.css('background-color', '');
     element.css('color', '');
  });
});

И, похоже, он работал с удалением свойств наведения, сохраняя исходный CSS.

Ответ 6

Мы можем переопределить эффект наведения CSS с помощью CSS и Jquery

$('div').hover(function(){ $(this).addClass('nohover');})

In CSS Add Class .nohover
.nohover {
pointer-events:none;
}

Ответ 7

Я думаю это лучше

<style>
    .red:hover { background-color:red; }
</style>
<div id="button">Hover On/Off</div>
<!-- by default is On-->
<div class="box red"></div>
<script>
    $('#button').click(function(){
        $('.box').toggleClass('red');
    });
</script>