Как присвоить/удалить стиль классу при наведении?
 

Люди добрые подскажите пожалуйста, как при наведении на объект с определенным классам добавить ему стиль, а если убрать мышь ему присваивался другой стиль или просто этот убрался.
Нашел только как добавить стиль при наведении, а как сделать чтобы стиль убрался когда мышь убираешь не знаю.

<script>
$('.hover-element').on('hover', function() {
$(this).css('z-index', '9999999');
});
</script>

помогите кто может:help: :help: :help:

An1984tonn,

$('.hover-element').on({
  mouseenter: function() {
    $(this).css('z-index', '9999999');
  },
  mouseleave: function() {
    $(this).css('z-index', '1');
  }
});

И держи в голове что `hover` event support in .on() was deprecated in jQuery 1.8, and removed in jQuery 1.9
Так что если джекверя до 1.9 то можно замутить так

$('.hover-element').on('hover', function (e) {
    if (e.type === 'mouseenter') {
      $(this).css('z-index', '9999999');
    }
    else if (e.type === 'mouseleave') {
      $(this).css('z-index', '1');
    }
});

Спасибо огромное и то и то работает!:dance:

Эм, CSS для кого придуман?

.hover-element:hover {
   z-index: 999;
}

Через скрипт можно намного проще сделать:

$('..hover-element').on('mouseenter mouseleave', function(e) {
   this.style.zIndex = e.type === 'mouseenter' ? 999 : 1;
});

Может и можно но что то не работает(Который проще)

An1984tonn,

'..hover-element'   /*--->*/   '.hover-element'

Подскажите а как можно сделать, чтобы добавлялся стиль, а когда мышь убираешь он просто убирался(не добавляя z-index 1)? Просто элемент уже имеет z-index и при уводе от него мышки, он меняется на 1, а нужно чтобы при наведении менялся в большую сторону, а при убирании возвращался к прежнему значению.

An1984tonn,

$('.hover-element').on('mouseenter mouseleave', function(e) {
   this.style.zIndex = e.type === 'mouseenter' ? 999 : ''; // <-- пустая строка должна откатить к заданным стилям
});

Я не пойму что я не так делаю но последний скрипт не работает(

причем вообще

$('.hover-element').on('hover', function (e) {
if (e.type === 'mouseenter') {
$(this).css('z-index', '9999999');
}
else if (e.type === 'mouseleave') {
$(this).css('z-index', ' ');// <-- пустая строка должна откатить к заданным стилям
}
});

Попробовал тут пустую строку не помогло (добавляет и не убирает добавленный стиль)

Все разобрался вроде заработало спасибо всем огромное за помощ!:thanks:

Подскажите плиз как всем изображениям (img) находящимся в блоке(div) с классом slide присвоить определенные стили например width:100%; и height:100%;

An1984tonn,

$('.slide img').css({width:'100%',height:'100%'});

<div style="width: 100px">
<img src="image.jpg">
</div>