Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.12.2016, 19:32
Интересующийся
Отправить личное сообщение для An1984tonn Посмотреть профиль Найти все сообщения от An1984tonn
 
Регистрация: 30.11.2016
Сообщений: 26

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

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

помогите кто может
Ответить с цитированием
  #2 (permalink)  
Старый 08.12.2016, 20:50
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

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

Последний раз редактировалось Coriolan161, 08.12.2016 в 21:05.
Ответить с цитированием
  #3 (permalink)  
Старый 08.12.2016, 23:43
Интересующийся
Отправить личное сообщение для An1984tonn Посмотреть профиль Найти все сообщения от An1984tonn
 
Регистрация: 30.11.2016
Сообщений: 26

Спасибо огромное и то и то работает!
Ответить с цитированием
  #4 (permalink)  
Старый 09.12.2016, 07:17
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

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


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

$('..hover-element').on('mouseenter mouseleave', function(e) {
   this.style.zIndex = e.type === 'mouseenter' ? 999 : 1;
});
Ответить с цитированием
  #5 (permalink)  
Старый 09.12.2016, 23:20
Интересующийся
Отправить личное сообщение для An1984tonn Посмотреть профиль Найти все сообщения от An1984tonn
 
Регистрация: 30.11.2016
Сообщений: 26

Сообщение от Ruslan_xDD Посмотреть сообщение
Эм, CSS для кого придуман?

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


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

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

Может и можно но что то не работает(Который проще)
Ответить с цитированием
  #6 (permalink)  
Старый 10.12.2016, 14:51
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

An1984tonn,
'..hover-element'   /*--->*/   '.hover-element'
Ответить с цитированием
  #7 (permalink)  
Старый 11.12.2016, 09:59
Интересующийся
Отправить личное сообщение для An1984tonn Посмотреть профиль Найти все сообщения от An1984tonn
 
Регистрация: 30.11.2016
Сообщений: 26

Подскажите а как можно сделать, чтобы добавлялся стиль, а когда мышь убираешь он просто убирался(не добавляя z-index 1)? Просто элемент уже имеет z-index и при уводе от него мышки, он меняется на 1, а нужно чтобы при наведении менялся в большую сторону, а при убирании возвращался к прежнему значению.
Ответить с цитированием
  #8 (permalink)  
Старый 11.12.2016, 17:00
Аватар для Coriolan161
Профессор
Отправить личное сообщение для Coriolan161 Посмотреть профиль Найти все сообщения от Coriolan161
 
Регистрация: 21.11.2015
Сообщений: 440

An1984tonn,
$('.hover-element').on('mouseenter mouseleave', function(e) {
   this.style.zIndex = e.type === 'mouseenter' ? 999 : ''; // <-- пустая строка должна откатить к заданным стилям
});
Ответить с цитированием
  #9 (permalink)  
Старый 11.12.2016, 21:15
Интересующийся
Отправить личное сообщение для An1984tonn Посмотреть профиль Найти все сообщения от An1984tonn
 
Регистрация: 30.11.2016
Сообщений: 26

Я не пойму что я не так делаю но последний скрипт не работает(
Ответить с цитированием
  #10 (permalink)  
Старый 11.12.2016, 21:29
Интересующийся
Отправить личное сообщение для An1984tonn Посмотреть профиль Найти все сообщения от An1984tonn
 
Регистрация: 30.11.2016
Сообщений: 26

причем вообще
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заставить слайдер останавливаться при наведении мыши? borus Events/DOM/Window 3 31.07.2014 10:55
Как плавно пролистать страницу вправо при наведении курсора в правую сторону? Orkhan Элементы интерфейса 2 11.04.2013 12:14
Изменение изображения при наведении mishko_o Элементы интерфейса 4 24.10.2011 16:20
Картинка не изменяется при наведении. astashovaj Общие вопросы Javascript 11 12.01.2011 10:44
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 24.05.2008 00:55