jquery mouseover событие [закрыт]

149

28 марта 2019, 09:40

Как отключить триггер у mouseover. Необходимо навести на элемент (изменится класс его), а когда мышку убрать что бы измененный класс остался

Answer 1

Для Вашего случая идеально подойдет функция mouseenter(). Она срабатывает когда пользователь наводит курсор на элемент (не вызывает событие когда курсор выходит из поля объекта). Подробнее Вы можете прочитать в официальной документации jQuery: http://api.jquery.com/mouseenter/

Пример действия (взято с сайта jQuery):

var i = 0; 
$("div.overout") 
  .mouseover(function() { 
    i += 1; 
    $(this).find("span").text("mouse over x " + i); 
  }) 
  .mouseout(function() { 
    $(this).find("span").text("mouse out "); 
  }); 
 
var n = 0; 
$("div.enterleave") 
  .mouseenter(function() { 
    n += 1; 
    $(this).find("span").text("mouse enter x " + n); 
  }) 
  .mouseleave(function() { 
    $(this).find("span").text("mouse leave"); 
  });

div.out { 
  width: 40%; 
  height: 120px; 
  margin: 0 15px; 
  background-color: #d6edfc; 
  float: left; 
} 
 
div.in { 
  width: 60%; 
  height: 60%; 
  background-color: #fc0; 
  margin: 10px auto; 
} 
 
p { 
  line-height: 1em; 
  margin: 0; 
  padding: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<!doctype html> 
<html lang="en"> 
 
<head> 
  <meta charset="utf-8"> 
  <title>mouseover demo</title> 
</head> 
 
<body> 
 
  <div class="out overout"> 
    <span>move your mouse</span> 
    <div class="in"> 
    </div> 
  </div> 
 
  <div class="out enterleave"> 
    <span>move your mouse</span> 
    <div class="in"> 
    </div> 
  </div> 
 
</body> 
 
</html>