Remove a:hover using JavaScript (not using jQuery... don't ask)
I thought this would be pretty simple; basically, it's a 5-star rating system. When a user clicks, for example, three stars, I want to freeze those three stars right where they're at. I've been trying to simply remove the hover for the a href
so it stays what it was at; maybe that's not the right method. I've exhausted absolutely everything I can think of. By the way this is straight JavaScript, not jQuery or anything. It's crazy, I know but all of the JS was written straight.
I've got this class:
.star-rating li a{
display:block;
width:25px;
height: 25px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(images/alt_star.png) left bottom;
z-index: 2;
left: 0px;
}
.star-rating a:focus,
.star-rating a:active{
border:0;
-moz-outline-style: none;
outline: none;
}
.star-rating a.one-sta开发者_如何学JAVAr{
left: 0px;
}
.star-rating a.one-star:hover{
width:25px;
}
and this code:
<ul class='star-rating'>
<li><a href="#" onclick="javascript: vote(<?=$id;?>, 1); disableStars(); return false;"
title='1 star out of 5' id="1s" class='one-star'>1</a></li>
I'd recommend adding a class to the element that contains them all, and then removing the class when you dont want the hover to affect it anymore.
.not-selected.star-rating a.one-star:hover{
width:25px;
}
With some javascript, remove the not-selected
class, therefore disabling the rule that applies to the hover effect.
If you want to remove :hover
behavior from the anchor tag add another class without a:hover
style.
精彩评论