CSS guide

CSS - Cascading Style Sheets


hover trix

Tyvärr så fungerar inte hover i Netscape. Detta är lite irriterande om man vill ändra egenskaper på en text-länk när surfaren för muspekaren över länken. Detta kan man lösa med lite trixande i JavaScript. Här följer ett exempel.

Exempel


Jojoxx.net

Kod


Del 1 (placeras mellan <head> och </head>)
<style type="text/css">
a           { color: blue;
              text-decoration: none; }
a:hover     { color: red;
              text-decoration: underline;
              font-style: italic; }
a.nshover   { color: red;
              text-decoration: underline;
              font-style: italic;
              background-color: white; }
</style>
<script language="JavaScript">
function hover(nlink){
	if (document.layers && nlink.text != null){
		document['nshover'].moveTo(nlink.x,nlink.y);
		if(nlink.target==null) nlink.target = "_self";
		with (document['nshover'].document){
			open();
			write("<a href=\""+nlink.href+"\" onMouseout=\"hide();\"");
			write(" class=\"nshover\" target=\""+nlink.target+"\">"+nlink.text+"</a>");
			close();
		}
		document['nshover'].visibility = "show";
	}
}
function hide(){
	document.layers.nshover.visibility='hide';
}
</script>
Del 2 (ett lager, placeras precis efter <body>)
<span style="position: absolute; visibility: hidden;" id="nshover"></span>
Del 3 (länken)
<a href="http://www.jojoxx.net" onMouseover="hover(this);">www.jojoxxx.net</a>


Förklaring

Första delen av scriptet läggs förslagvis i head. Style definitionen med a:hover används av Internet Explorer, och a.nshover används av Netscape. I exemplet har vi använt understrykning och kursiv text för den aktiva länken. Vi har även satt bakgrunden till vit för att inte "orginal"-länken skall lysa igenom under. Använder du en bakgrundsbild på din sida så att du inte kan ha vit bakgrund på din sida plockar du helt enkelt bort denna deklaration. Tänk då på att typsnittsstilen inte får skilja mellan inaktiv och aktiv länk eftersom då "orginal"-länken kommer att synas under den aktiva länken.

Kom igång fort
Det enda du behöver lägga till för dina länkar är alltså onMouseover="hover(this);".