【问题标题】：How to get css hover values on click?如何在点击时获得 css 悬停值？
【发布时间】：2011-09-01 03:02:42
【问题描述】：

跟进这个question，我有另一个问题 - 当您单击文本链接时如何获取 css 悬停值？

例如，我有文本悬停的这些值

a.test {
    text-decoration:none;
}

a.test:hover {
    text-decoration:none;
    opacity:0.6 !important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
    filter:alpha(opacity=60) !important; 
}

<a href="#" class="test">Click Me</a>

这当然失败了！

$(".test").click(function(){
   alert($(this).css());
   return false;
})

有可能吗？

我遇到了类似的question，但我不想使用那个插件。

【问题讨论】：

标签： javascript jquery css click hover

【解决方案1】：

您可以执行类似的操作，创建自己的 CSS 属性列表，这些属性将应用于该元素（假设您有一个列表），然后循环遍历它们：

var cssList = ['text-decoration','opacity','filter'];

$(".test").click(function(){
    for(x in cssList){
        alert($(this).css(cssList[x]));
    }    
   return false;
})

示例：http://jsfiddle.net/jasongennaro/GmWCz/

当然，如果你需要的话，你可以一直这样做并添加所有属性。

【讨论】：

谢谢。但它怎么会为filter:alpha(opacity=60) !important; 返回none？

【解决方案2】：

HTML 更改，添加一个额外的类：

<a href="" class="test apply-hover">Click Me</a>

CSS 更改，修改悬停选择器：

a.test.apply-hover:hover { ...

JS 更改，在点击事件中移除 'apply-hover' 类：

$(this).removeClass('apply-hover');

示例：http://jsfiddle.net/bGKE7/1/

【讨论】：

【解决方案3】：

这样做的正确方法似乎是创建一个样式标签并直接重新分配悬停属性。我有一个工作示例here。

（信用到期的信用——我从定义的函数here得到）

【讨论】：

【解决方案4】：

Take a look here

这是.css() 方法的重新实现（读作：打鸭子）

And here's the DEMO

【讨论】：