<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head> <title> New Document </title> <script src="jquery.js"></script> </head><style> a{display:inline-block;width:30px;height:30px;background-color:#f00;float:right;margin:5px;} a:hover,a:hover ~ a{background-color:#000} a.selected{background-color:#000}</style> <body> <a></a> <a></a> <a></a> <a></a> <a></a> <a></a> <script> $("a").each(function(i){ $(this).click(function(){ $('a').removeClass("selected"); $("a:gt("+i+")").addClass("selected"); $(this).addClass("selected"); }) }) </script> </body></html>