Question

I am trying to make a star rating type system and am working on the css part only at the minute. I’ve done so that the stars are replaced with lit up ones using a background image in css through background image like this:

.hover-stars:hover{
    background-image: url(http://www.softwares.com/img/icons/favorites.png);
    background-repeat: no-repeat;       
}

What i want to try and do know is implement an after hover affect, so the image stays there once the user has hovered over it. and if possible undo that if the user should re-hover over it a second time. to create the illusion the stars are following the users mouse trail.

I’ve tried this but it just doesn’t work.

.hover-stars:hover:after{
    background-image: url(http://www.softwares.com/img/icons/favorites.png);
    background-repeat: no-repeat;
}

Answer 1

The :after selector inserts content after the element. So that wouldn’t be the correct way of using it. I don’t believe what you are looking for can be done with CSS. You can look into jQuery to do the trick for you, by adding or removing classes to the element on hover. For example…

$(".hover-stars").hover(
function () { $(this).addClass(".hover-star-after")
});​

And then add the extra CSS classes you want to add…

.hover-stars-after {
background-image: url('http://www.softwares.com/img/icons/favorites.png');
background-repeat: no-repeat;
}