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

发布于 2024-10-12 15:29:49 字数 413 浏览 3 评论 0原文

所以我设置了一个具有不同背景的菜单：悬停颜色。按钮背景将为灰色，悬停按钮时 animate() 为其相应的颜色。

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

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

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

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

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

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

原文

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

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝色星空 2024-10-19 15:29:49

我非常确定，为了获取 :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});
});

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.

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.

Something like this: 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});
});

回复收藏 0 原文

时光病人 2024-10-19 15:29:49

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

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

回复收藏 0 原文

终难遇 2024-10-19 15:29:49

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("背景颜色");`

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

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

回复收藏 0 原文

~没有更多了~