Question

单击文本链接时，如何取消绑定文本链接的悬停不透明效果？

例如，

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。

修改

我更喜欢没有黑客课程的解决方案。有可能吗？

Answer 1

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

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

内联样式应优先于CSS样式。

Answer 2

这是一个解决方案，它添加了一个用于通过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');
});

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

2 个答案: