如何更改单击文本链接时的悬停不透明度效果？答案

【问题标题】：How can I change the hover opacity effect of a text link when it is clicked?如何更改单击文本链接时的悬停不透明度效果？
【发布时间】：2011-11-08 02:07:20
【问题描述】：

如何解除文本链接被点击时的悬停不透明度效果？

例如，

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(){
   $(this).unbind('mouseenter mouseleave');
   return false;
})

我不希望点击时出现不透明悬停效果。

这里是link。

编辑：

我更喜欢没有 hack 类的解决方案。有可能吗？

【问题讨论】：

stackoverflow.com/questions/436629/how-do-i-remove-hover 的可能重复项。
你显然不能解绑从未绑定过的东西:)

标签： jquery onclick opacity

【解决方案1】：

这是一个解决方案，它添加了一个用于使用 css 重置不透明度的类。

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

a.test.clicked:hover {
    opacity:1 !important;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter:alpha(opacity=100) !important;
}


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


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

$(".test").mousedown(function(){
   $(this).addClass('clicked');
});

$(".test").mouseup(function(){
   $(this).removeClass('clicked');
});

【讨论】：

我想使用 class hack 是最好的解决方案！

【解决方案2】：

如果您无法修改创建 :hover 状态的 CSS，请使用样式。

$('.test').css({'opacity':'1.0 !important','-ms-filter':'',filter:'none !important'});

内联样式的优先级应该高于 CSS 样式。

【讨论】：

这不起作用，因为 $.css(...) 设置元素的内联样式，而不是悬停时的样式。
内联样式的优先级高于悬停状态，所以会覆盖悬停状态。