从以下位置获取css值:使用.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.

所以我设置了一个具有不同背景的菜单:悬停颜色。按钮背景将为灰色,并将按钮animate()悬停在其各自的颜色上。

I can grab the original default color of whatever button I hover over like this:

我可以抓住我悬停在其上的任何按钮的原始默认颜色,如下所示:

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

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.

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

Something like this(Or is there another way):

像这样的东西(或者是另一种方式):

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

Any ideas? is this possible?

有任何想法吗?这可能吗?

3 个解决方案

#1


6  

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.

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

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.

可能是你可以等到用户进行悬停,然后获取颜色,用默认值覆盖它,存储它以供将来参考,然后做动画,但这可能比简单地协调你的JS和CSS更麻烦。

Something like this: http://jsfiddle.net/UXzx2/

像这样: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});
});

#2


0  

            // 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


0  

jQuery works with almost every css selector, So in this case also this should work fine. Try the code below.

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

智能推荐

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2011/01/18/13ce65abd23b8c7048332202f6ffc65d.html



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告