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

Question

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

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

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

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

Примерно так (или есть другой способ):

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

Есть идеи?это возможно?

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

Answer 2

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>

$ (". TargetClassName: hover"). Css ("background-color"); `

Answer 3

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