CSS overrulen

[Frats]

Hai,

Op dit moment heb ik een klein probleempje met links in de vorm van plaatjes...

Het is namelijk zo dat op alle links (standaard op de a:hover) een hover element zit met een achtergrondkleur wijziging. Dit is opzich ook de bedoeling, alleen bij plaatjes ziet dat er nogal vreemd uit.

Nu wil ik dus eigenlijk dat attribuut automatisch overschrijven, zodat plaatjes met een link erin geen hover hebben.

Alleen liefst zonder overal een class aan te moeten hangen...

Ik heb al geprobeerd om

img a:hover {

}

te gebruiken, maar die lijkt helemaal niet gebruikt te worden.
Bovendien weet ik ook niet hoe ik met CSS aan zou moeten geven dat hij géen achtergrond moet gebruiken (ofwel het background-color element helemaal uitzetten, als het daarboven gedefineerd is (zoals in de standaard A:hover) )

Kan iemand een handje helpen? :/

 

[Tha Devil]

img a:hover werkt inderdaad niet, ik heb tenminste dit nog nooit gezien:

<img src="iets.jpg"><a href="iets.php">iets</a></img>

Probeer hem eens andersom

a:hover img {

}

Want je HTML zal dit zijn

<a href="iets.php"><img src="iets.jpg" /></a>

 

[Frats]

Dat verklaart al het een en ander :/

Nu zit ik alleen nog met het probleem dat ik dus niet weet wat er in de class zelf moet staan zodat de link zijn hover waarde niet mag laten zien als er een plaatje in zit...

Maar als ik het zo zeg en zie klinkt het ook onlogisch dat het mogelijk is, of ligt dat aan mij?

 

[Tha Devil]

Hoe ziet je a:hover code er uit dan?

 

[Frats]

Op het moment staat er dit ->

a:hover
		{
		color:#FFFFFF;
		background-color:#990099;
		padding: 5px 5px 5px 5px;
		}

Ideaal gezien zou ik natuurlijk alle properties van deze overrulen, ongeacht wat er later inkomt, maar als je gewoon iig deze zou kunne overrulen vind ik het ook wel best

 

[M@rcel]

Frats,

Wat gebeurd er als het volgende doet ( classes )

<a href="iets.php" class="image"><img src="iets.jpg" /></a>

En vervolgens in je css-file het volgende zetten:

a.image:link, a.image:visited {
	font-size: 9pt;
	color: #FFFFFF;
	height: 12px!important;
	text-decoration: none;
}

a.image:hover {
	background-position: 0px -25px;
	text-decoration: none;
	color: #FF9900;
}

Let op: dit een stukje van css-file die ik van mijn verenigings-site ( gemaakt in joomla CMS ) gekopieerd heb dus je moet ze nog aanpassen naar de door jouw gewenste kleuren.

Hopelijk draagt dit iets bij in de oplossing. Succes:thumb:

 

[ErikBooy007]

a:hover img {
  background-color: transparant;
}

transparant is de standaard value van background-color, dat zou de andere class dus moeten overschrijven.