Question

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

For instance,

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.

Here is the link.

EDIT:

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

Answer 1

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