olika länk hover i samma dokument

HTML & CSS

2 svar · 557 visningar · startad av Emil RT

Medlem sedan feb. 2004200 inlägg
Trådstart#1

hejsan,

kan man lösa så att a klassen kan anta olika värden?

dvs jag har en tabellsida med meny till höger och där vill jag att länkarna ska få en färg när man har musen över, men jag vill att länkarna ska få en annan färg när musen är över på resten av sidan.

jag inkluderar en css mall och jag är van vid att skriva typ:

a {
	font-family: Verdana, Arial, Helvetica, sans-serif;

	color: 01698C;
	font-weight: plain;
	text-decoration: none;
}
a:link {
	color: 01698C;
	font-weight: plain;
	text-decoration: none;
}
a:visited {
	color: 01698C;
	font-weight: plain;
	text-decoration: none;
}
a:hover {
	color: FFFFFF;
	font-weight: plain;
	text-decoration: none;
}
a:active {
	color: 01698C;
	font-weight: plain;
	text-decoration: none;
}

hur gör man om man vill ha mer än en variant?

/E

Medlem sedan juli 20013 378 inlägg
#2

Om din meny ser ut såhär:

<div id="meny">
<a href="#">Ett</a>
<a href="#">Två</a>
<a href="#">Tre</a>
</div>

Så kan du skriva din CSS såhär:

/* grundutseende på länkar */
a { .... } 
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
/* Länkar i menyn */
#meny a { .... } 
#meny a:link { ... }
#meny a:visited { ... }
#meny a:hover { ... }
#meny a:active { ... }

Och om din meny är uppdelad på flera ställen på sidan,dvs om du behöver köra med class istället för id t.ex. såhär

<div class="meny">
<a href="#">Ett</a>
<a href="#">Två</a>
<a href="#">Tre</a>
</div>

Så kan du skriva din CSS såhär:

/* grundutseende på länkar */
a { .... } 
a:link { ... }
a:visited { ... }
a:hover { ... }
a:active { ... }
/* Länkar i menyn */
.meny a { .... } 
.meny a:link { ... }
.meny a:visited { ... }
.meny a:hover { ... }
.meny a:active { ... }
Medlem sedan mars 20025 907 inlägg
#3

Ge dina länkar en klass

a.foo:hover {
	color: #f00;
}

...

<a href="#" class="foo">bar</a>

/r så var man lite efter igen ja.

275 ms totalt · 4 externa anrop · v20260731065814-full.d34c6d5a
126 ms — deklarationer (db)
0 ms — hämta statistik (cache)
145 ms — hämta tråd, inlägg och bilagor (db)
120 ms — ändringar (db)