CODEWITHSUNDEEP
jquerycsshover
chasethesunnn
chasethesunnn

Reputation: 2234

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?

Upvotes: 12

Views: 13820

Answers (3)

Vijay Vishwakarma
Vijay Vishwakarma

Reputation: 1

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

Upvotes: 0

user3565920
user3565920

Reputation: 94

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

Upvotes: 0

user113716
user113716

Reputation: 322502

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

Upvotes: 6

Related Questions