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

【问题标题】：Get the css value from :hover with .css() - jquery从 :hover with .css() 获取 css 值 - jquery
【发布时间】：2011-06-10 19:17:35
【问题描述】：

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

我可以像这样抓住悬停在任何按钮上的原始默认颜色：

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

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

类似这样的东西（或者还有其他方法）：

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

有什么想法吗？这可能吗？

【问题讨论】：

标签： jquery css hover

【解决方案1】：

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

可能你可以等到用户悬停，然后抓取颜色，用默认值覆盖它，存储它以供将来参考，然后制作动画，但这可能比简单地协调你的 JS 和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});
});

【讨论】：

更新了一个unhover功能来完成效果jsfiddle.net/UXzx2/1
谢谢@generalhenry。我太懒了。 ;o)
这实际上非常聪明，因为您触发悬停而不做任何事情，但存储值然后您对其进行动画处理：] 很好！也谢谢。
您可以只创建几个数组来跟踪所有颜色，例如：jsfiddle.net/UXzx2/9
@Nils R：是的，这是因为当您将鼠标悬停在一个孩子上时，您也将鼠标悬停在其父级上。顺便说一句，这是一个使用.data() 将颜色与特定元素相关联的版本，而不是使用数组。对 $(this).index('li') 的调用需要对每个事件进行 DOM 选择。使用.data()，每个元素只需根据该特定元素查找其存储的值。

【解决方案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 适用于几乎所有的 CSS 选择器，因此，在这种情况下，这也应该可以正常工作。试试下面的代码。

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

【讨论】：