Javascript-форум (https://javascript.ru/forum/)
-   Сайт Javascript.ru (https://javascript.ru/forum/site/)
-   -   Как присвоить/удалить стиль классу при наведении? (https://javascript.ru/forum/site/66325-kak-prisvoit-udalit-stil-klassu-pri-navedenii.html)

An1984tonn 08.12.2016 19:32

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

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

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

Coriolan161 08.12.2016 20:50

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

An1984tonn 08.12.2016 23:43

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

ruslan_mart 09.12.2016 07:17

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

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


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

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

An1984tonn 09.12.2016 23:20

Цитата:

Сообщение от Ruslan_xDD (Сообщение 437504)
Эм, CSS для кого придуман?

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


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

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


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

Coriolan161 10.12.2016 14:51

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

An1984tonn 11.12.2016 09:59

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

Coriolan161 11.12.2016 17:00

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

An1984tonn 11.12.2016 21:15

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

An1984tonn 11.12.2016 21:29

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


Часовой пояс GMT +3, время: 00:57.