CSS problem länkar

Tråden skapades och har fått 5 svar. Det senaste inlägget skrevs .
1
  • Medlem
  • Göteborg
  • 2004-09-21 10:56

Tjenare,

jag har följande:

a:link, a:visited, a:hover {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover { border-bottom-style: dotted;
		  border-bottom-width: thin;
		  border-bottom-color: #999999;
	}
	
a:active { text-decoration:none;
			color:#000000;}

Detta fungerar fint på alla mina länkar i dokumentet men nu har jag några bilder med länkar och jag vill inte att ovanstående a:hover skall appliceras på dem, jag testade:

a:hover IMG { border-bottom-style: none;
	}

men det fungerade inte, någon som har tips ?

/Jefman

  • Medlem
  • Mark
  • 2004-09-21 11:43
Ursprungligen av jef:

Tjenare,

jag har följande:

a:link, a:visited, a:hover {
	text-decoration: none;
	color: #000000;
}
a:visited {
	text-decoration: none;
	color: #000000;
}
a:hover { border-bottom-style: dotted;
		  border-bottom-width: thin;
		  border-bottom-color: #999999;
	}
	
a:active { text-decoration:none;
			color:#000000;}

Detta fungerar fint på alla mina länkar i dokumentet men nu har jag några bilder med länkar och jag vill inte att ovanstående a:hover skall appliceras på dem, jag testade:

a:hover IMG { border-bottom-style: none;
	}

men det fungerade inte, någon som har tips ?

/Jefman

Jag vet inte hur man gör så att det fixas auto på bilder men jag brykar göra så här:

I css filen

.exempel {border-bottom-style: none;
}
<div class="exempel">
din bild
</div>

men om det går att den fixar alla bilder så auto så skulle jag också vara tacksam

  • Medlem
  • Göteborg
  • 2004-09-21 12:47
Ursprungligen av THoG:

men om det går att den fixar alla bilder så auto så skulle jag också vara tacksam

Jag läste på w3.org och hittade följande:

Pseudo-classes can be used in contextual selectors:

A:link IMG { border: solid blue }

Men har inte lyckats få det att fungera, eller så har jag fattat helt fel....

/Jefman

  • Medlem
  • Stockholm
  • 2004-09-22 18:49

Problemet är att a:link img {} säger vilka egenskaper som en bild ska ha som ligger inuti ett a-element (bordern ligger inte på bilden utan på a-elementet utanför).

Vad du får göra är att sätta en klass på de länkar du vill ska vara utan border-bottom.
Tex

<a href="#" class="imageurl"><img src="http://www.w3schools.com/images/vxhtml.gif" /></a>

och komplettera med css-koden

a.imageurl:hover { border-bottom: 0; }

ps. din css kod går att skriva med färre tecken

a:link, a:visited {
  text-decoration: none;
  color: #000;
}
/* släng denna regel, den står  ju åvan! */
a:visited {
        text-decoration: none;
        color: #000000;
}
a:hover { 
  border-bottom: 1px dotted #999;
  text-decoration: none;
  color: #000;
}
 /* lägg till denna i listan åvan då den inte har egenskaper som skiljer sig från hover */ 
a:active {
  text-decoration:none;
  color:#000000;
}
  • Oregistrerad
  • 2004-10-20 16:30

Korta ner din kod till följande istället:

a:link, a:visited, a:hover, a:active {
 text-decoration: none;
 color: #000;
 }

a:hover { 
 border-bottom: thin dotted #999;
 }

#link:hover {
 border: none;
 }

Hej

Då sparkar jag liv i denna gamla tråd. Wee...

Jag har samma problem som jef med att mina länkade bilder får samma border-bottom som mina textlänkar. Svaret ivar ger att man kan lägga in en class i <a> taggen och på så sätt styra länkade bilder fungerar bra.

Problemet jag kör ett CMS och har inte möjlighet att lägga in en class i alla bilders <a> tagg. Jag har letat och letat men inte hittat något svar. Börjar bli helt galet frustrerad.

Finns det verkligen inget sätt man kan lösa det här utan att lägga in en class?!

1
Bevaka tråden