从：.css() - jquery中获取css值

Question

所以我设置了一个有不同背景的菜单:悬停颜色。这些按钮的背景将是一个灰色的颜色和悬停按钮动画()到其各自的颜色。

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

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

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

像这样的东西(或者还有别的方法)：

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

有什么想法吗？这个是可能的吗？

Answer 1

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

您可以等到用户悬停，然后抓取颜色，用默认值覆盖它，存储它供将来参考，然后做您的动画，但这可能是更麻烦的只是协调您的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});
});

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

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