Get the css value from :hover with .css() - jquery

问题:

So Im setting up a menu that has different background :hover colors. The buttons backgrounds will be a grey color and upon hover the button animate() to its respective color.

I can grab the original default color of whatever button I hover over like this:

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

But is it possible to get the color from a css :hover property that I set? I will have the :hover colors set for each button because if someone doesn't have JS enabled the navigation will still have :hover effects working.

Something like this(Or is there another way):

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

Any ideas? is this possible?

回答1:

I'm pretty sure that in order to get the background-color of the :hover pseudo, it will first require a browser event to apply the style. In other words, I think you could get it when you do a hover with the mouse, but not until then.

Could be that you could wait until the user does a hover, then grab the color, override it with the default, store it for future reference, then do your animation, but that may be more trouble that simply coordinating your JS and CSS.

Something like this: 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 works with almost every css selector, So in this case also this should work fine. Try the code below.

$("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");`