获取css值从：hover with .css（） - jquery [英] 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');

但是是否可以从我设置的css：hover属性中获取颜色？我将有：为每个按钮设置悬停颜色，因为如果有人没有JS启用导航将仍然有：hover效果工作。

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?

推荐答案

我很确定为了得到 / code>的：hover 伪，它首先需要一个浏览器事件来应用样式。换句话说，我想你可以在时用鼠标悬停，但是直到那时为止。

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.

可能是你可以等待，直到用户做悬停，然后抓住颜色，覆盖它的默认值，存储它供以后参考，然后做你的动画，但这可能更麻烦，简单地协调你的JS和CSS。

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.

如下所示： 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});
});

这篇关于获取css值从：hover with .css（） - jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！