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


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

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

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

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

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

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

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


12


источник


Ответы:


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

Может быть, вы можете подождать, пока пользователь сделает зависание, затем возьмет цвет, переопределит его по умолчанию, сохранит его для будущей ссылки, а затем сделает вашу анимацию, но это может быть больше проблем, которые просто координируют ваши 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});
});

6



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

0



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:. Зависать "). CSS (" цвет фона"); `


0