从 :hover with .css() 获取 css 值 - jquery

2022-01-22 00:00:00 hover jquery css

所以我设置了一个具有不同背景的菜单:悬停颜色.按钮背景将是灰色，并且在将按钮 animate() 悬停到其各自的颜色时.

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 属性中获取颜色?我将为每个按钮设置 :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?

推荐答案

我很确定为了得到 :hover 的 background-color 伪，它首先需要一个浏览器事件来应用样式.换句话说，我认为当你用鼠标悬停时你可以得到它，但直到那时.

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

相关文章