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

Posted 2023-03-06

【中文标题】从 :hover with .css() 获取 css 值 - jquery

【英文标题】：Get the css value from :hover with .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');

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

【参考方案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");`