Как применить :hover в jquery?

322

12 декабря 2016, 10:04

$('#color4').on('change', function () {
    $("#menu-levoe-menyu ul li a").css("color", $(this).val())
});

Нужно не просто применить цвет к ссылкам, а сделать чтобы этот цвет срабатывал только при наведении (:hover).

Answer 1

Можно как-то так:

var color = '#fff'; //цвет по умолчанию
$('#color4').on('change', function () {
    color = $(this).val();
});
$("#menu-levoe-menyu ul li a").hover(function(){
  $(this).css("color", color);
}, function () {
  //а здесь цвет не hover
});

Answer 2

(function ($, linkSelector, colorSourceSelector) { // через замыкание отбиваемся от глобальной видимости и конкретных селекторов
    var color,
        DATA_KEY = 'default-color'; // константы есть, но их пока нет, поэтому просто делаем вид
    $(document).on('change', colorSourceSelector, function () {
        color = $(this).val(); // получаем реальный цвет, на который менять
    });
    $(document).on('hoverin', linkSelector, function () {
        var $this;
        if (!$this.data(DATA_KEY)) { // получаем цвет по умолчанию (и делаем это всего один раз для исключения нештатных ситуаций)
            $this.data(DATA_KEY, $this.css('color'));
        }
        if (color) { // если цвет к этому моменту еще не получен - ничего и не заработает
            $this = $(this);
            $this.css('color', color);
        }
    }).on('hoverout', linkSelector, function () {
        var $this;
        if (color) { // опять же, нет цвета - нет манипуляций
            $this = $(this);
            if ($this.data(DATA_KEY) { // на всякий случай проводим двойную проверку
                $this.color($this.data(DATA_KEY));
            }
        }
    });
})(jQuery, '#menu-levoe-menyu ul li a', '#color4'); // запускаем монстра

Answer 3

Альтернативный вариант (без адского количества JS)

$(document).ready(function() { 
  $('#myColor').on('input', function() { 
    $('head').append('<style type="text/css">#container a:hover{color:' + $(this).val() + ' !important;}</style>'); 
  }); 
});

<!DOCTYPE html> 
<html> 
 
<head> 
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
  <meta charset="utf-8"> 
  <title>JS Bin</title> 
</head> 
 
<body> 
 
  <p> 
    choose your color 
    <input type='color' id='myColor' value='#ff0000'> 
  </p> 
 
  <div id='container'> 
    <a href='http://google.com'>Go here</a> 
  </div> 
 
 
</body> 
 
</html>