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

Question

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?

user113716 · Accepted Answer · 2011-01-18 01:59:41Z

6

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

edited Jan 18, 2011 at 1:59

answered Jan 18, 2011 at 1:00

user113716

323k64 gold badges454 silver badges441 bronze badges

Sign up to request clarification or add additional context in comments.

16 Comments

generalhenry Over a year ago

updated with an unhover function to complete the effect jsfiddle.net/UXzx2/1

user113716 Over a year ago

Thanks @generalhenry. I was too lazy. ;o)

chasethesunnn Over a year ago

thats actually pretty smart because your triggering the hover without doing anything but store the value then u animate it :] nice! thanks too.

generalhenry Over a year ago

you can just make a couple arrays to track all the colors eg: jsfiddle.net/UXzx2/9

user113716 Over a year ago

@Nils R: Yes, that is because when you hover a child, you're also hovering over its parent. By the way, here's a version that uses .data() to associate the colors with the specific element instead of using an Array. The call to $(this).index('li') requires a DOM selection on every event. With .data() each element just looks up its value stored against that specific element.

|

user3565920 · Accepted Answer · 2014-06-10 02:22:42Z

0

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

answered Jun 10, 2014 at 2:22

user3565920

941 silver badge2 bronze badges

Comments

Vijay Vishwakarma · Accepted Answer · 2018-02-22 08:16:02Z

0

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

answered Feb 22, 2018 at 8:16

Vijay Vishwakarma

11 bronze badge

Collectives™ on Stack Overflow

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

3 Answers 3

16 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

16 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related