Получить значение css из: hover с .css() - jquery

Итак, я создаю меню, имеющее другой фон: наведите цвета. Фон с кнопками будет серого цвета и наведите курсор на кнопку animate() до соответствующего цвета.

Я могу захватить исходный цвет по умолчанию любой кнопки, на которой я наводил вид:

var origBackgroundColor = $(this).css('background-color');

Но можно ли получить цвет из свойства css: hover, которое я установил? У меня будут следующие цвета: цвета для каждой кнопки, потому что, если у кого-то нет JS, навигация по-прежнему будет иметь: эффекты зависания.

Что-то вроде этого (или есть другой способ):

var hoverColor = $(this).css('background-color:hover');

Любые идеи? возможно ли это?

Ответ 1

Я уверен, что для получения background-color псевдонима :hover сначала потребуется приложение браузера для применения стиля. Другими словами, я думаю, вы могли бы получить его, когда вы наведите курсор мыши, но только до тех пор.

Может быть, вы можете подождать, пока пользователь сделает зависание, затем захватит цвет, переопределит его по умолчанию, сохранит его для будущей ссылки, а затем сделает вашу анимацию, но это может быть больше проблем, которые просто координируют ваши JS и CSS.

Что-то вроде этого: http://jsfiddle.net/UXzx2/

    // grab the default color, and create a variable to store the hovered.
var originalColor = $('div').css('background-color');
var hoverColor;

$('div').hover(function() {
      // On hover, if hoverColor hasn't yet been set, grab the color
      //    and override the pseudo color with the originalColor
    if( !hoverColor ) {
        hoverColor = $(this).css('background-color');
        $(this).css('background-color',originalColor);
    }
      // Then do your animation
    $(this).animate({backgroundColor:hoverColor});
});

Ответ 2

            // How about writing anonymous function using JQuery, 
            // that encapsulate the originalColor:
            $(function() {
                var originalColor = $('div').css('background-color');
                $('div').hover(
                     function() {
                        $(this).css('background-color','cyan');
                     },
                     function () {                            
                        $(this).css('background-color', originalColor);
                    }
                );
            });

Ответ 3

jQuery работает почти с каждым селектором css, Поэтому и в этом случае это должно работать нормально. Попробуйте код ниже.

$("li").hover(function(){
  var color = $(this).find(".link").css("color");
  console.log(color);
});

a{
  color: white;
  background-color: rgb(0, 0, 0);
  font-weight: bold;
  padding: 10px 20px;
}

a:hover{
  color: rgb(255, 165, 0);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <li><a href="#" class="link">Sample Link</a></li>
</nav>