css - remove a:hover using javascript (not using jquery... don't ask) -


i thought pretty simple.... basically, it's 5-star rating system. when user clicks, example, 3 stars... want freeze 3 stars right they're at. i've been trying remove hover href stays at... maybe that's not right method. i've exhausted absolutely can think of... way straight javascript, not jquery or anything. it's crazy, know of js written straight....

i've got 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-star{     left: 0px; } .star-rating a.one-star:hover{     width:25px; } 

and 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 class element contains them all, , removing class when dont want hover affect anymore.

.not-selected.star-rating a.one-star:hover{     width:25px; } 

with javascript, remove not-selected class, therefore disabling rule applies hover effect.


Comments

Popular posts from this blog

javascript - Enclosure Memory Copies -

php - Replacing tags in braces, even nested tags, with regex -