单击文本链接时，如何更改其悬停不透明度效果? [英] How can I change the hover opacity effect of a text link when it is clicked?

问题描述

如何在单击文本链接时解除其悬停不透明度效果?

How can I unbind the hover opacity effect of a text link when it is clicked?

例如，

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

我不希望单击它时出现这种不透明效果.

I don't want that opacity hover effect when it is clicked.

这是链接.

我希望没有hack类的解决方案.有可能吗?

I would prefer a solution without hack classes. Is it possible?

推荐答案

这是添加一个用于重置css不透明度的类的解决方案.

here is a solution that adds a class which is used to reset the opacity with 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');
});

这篇关于单击文本链接时，如何更改其悬停不透明度效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！