a:hover

[HenkRog]

Hallo,

ik heb volgend CSS bestand (gedeeltelijk weergegeven):

#page_content {
	margin-top: 20px;
	margin-bottom: 30px;
}

#page_content a {
	color: #000080;
	text-decoration: none;
}
#page_content a:hover {
	border-bottom-style: dotted;
	border-bottom-color: #000080;
	border-bottom-width: thin;
}

.thumb {
	margin: 10px;
	border: 1px solid #666666;
	width: 150px;
	height: auto;
	float: left;
	text-align: center;
}
.thumb img{
display: inline;
margin: 5px;
border: 1px solid #A0ACC0;
}
.thumb a:hover img {
	border: 1px solid #FDF002;

Wanneer ik dus met de muis over een link beweeg komt er dus een stippelijn onder. Wanneer ik echter met de muis over een afbeelding beweeg, komt er een gele kader rond en dan nog eens een stippelijn daar onder. Wat moet ik doen om bij de afbeelding die stippelijn niet te tonen, enkel de gele kader?

 

[James007]

Je kunt de tekst (en dus niet de afbeelding) omgeven met een <span> tag en daarna je css aanpassen zodat je dus krijgt:

a:hover span {
onderlijning...
}

en

a:hover img {
gele kader...
}

 

[csshunter]

... en wat voorbeeldjes van "split image and text hover colors for one link" zijn hier te vinden. Veel mogelijkheden, maar niet allemaal even kansrijk!

Met vriendelijke groet,
CSShunter

NB: die pagina's zijn van november 2006. Er moet even gecheckt worden of alles nog geldig is met de browser-versies die na die tijd zijn uitgekomen.