webForumDet fria alternativet
Logga in / Bli medlem

a:hover img fungerar inte

HTML & CSS

18 svar · 865 visningar · startad av superc

supercMedlem sedan maj 200711 inlägg
Frågan#1

Tjena,
det är så att border-bottom inte vill försvinna på bildlänkar. Vad jag jag för fel? Kolla koden nedan.

#content a:link {
color: #c9c9c9;
text-decoration: none;
}

#content a:visited {
color: #c9c9c9;
text-decoration: none;
}

#content a:hover {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #ffc87e;
}

#content a:active {
color: #fff;
text-decoration: none;
border-bottom: 2px solid #ffc87e;
}

#content a:hover img {
border: none;
}
voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#2

Vilken läsare testar du koden på?

supercMedlem sedan maj 200711 inlägg
#3

firefox

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#4
<div id="content">as<a href="#"><img src="test.jpg"></a>sd</div>

fungerar för mig.. bli någon orange border och att den försvinner.. vad har du för doctype?

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#5

lägg till
img {border:none; display:block}
till stilmallen och se vad som händer.

supercMedlem sedan maj 200711 inlägg
#6

precis så ska det bli... konstigt det här. Doctypen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

supercMedlem sedan maj 200711 inlägg
#7

Danne V skrev:

lägg till
img {border:none; display:block}
till stilmallen och se vad som händer.

Det tog bort bordern :) men då blev det som att man la in en radbrytning innan den aktuella bilden :/

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Bob</title>
		<link rel="stylesheet" href="core2.css" type="text/css" />
	</head>
	<body>
		<div id="content">as<a href="#"><img src="bild.jpg"></a>sd</div>
	</body>
</html>

och CSS:

#content a:link {
color: #c9c9c9;
text-decoration: none;
}

#content a:visited {
color: #c9c9c9;
text-decoration: none;
}

#content a:hover {
color: #fff;
text-decoration: none;
border-bottom: 1px solid #f00;
}

#content a:active {
color: #fff;
text-decoration: none;
border-bottom: 2px solid #ffc87e;
}

#content a:hover img {
border: none;
}
img {border: 0}

fungera 100% för mig i Firefox.

supercMedlem sedan maj 200711 inlägg
#9

hmm, för mej fungerar det inte :S Det ska alltså inte bli någon border när man hovrar en bild. Det blir det för mej när jag testar din kod.

voigtann1s avatarvoigtann1Medlem sedan juni 20019 519 inlägg
#10

Då missförstod jag helt din fråga...

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#11

superc skrev:

Det tog bort bordern :) men då blev det som att man la in en radbrytning innan den aktuella bilden :/

Ta bort display:block, då.

supercMedlem sedan maj 200711 inlägg
#12

Danne V skrev:

Ta bort display:block, då.

Nä, för då kommer bordern tillbaka :p

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#13

superc skrev:

Nä, för då kommer bordern tillbaka :p

Det hänger en häst i luften här, helt klart.

Jag ber alltid folk att ladda upp hela, kompletta sidan till en server och ge en länk, eftersom man då ser ALLT och inte bara det som trådskaparen tycker är relevant. Orsaken till problemen döljer sig nämligen nästan alltid nån helt annan stans än vad man först tror.

Kan du göra det?

supercMedlem sedan maj 200711 inlägg
#14

Danne V skrev:

Det hänger en häst i luften här, helt klart.

Jag ber alltid folk att ladda upp hela, kompletta sidan till en server och ge en länk, eftersom man då ser ALLT och inte bara det som trådskaparen tycker är relevant. Orsaken till problemen döljer sig nämligen nästan alltid nån helt annan stans än vad man först tror.

Kan du göra det?

Du kan ju egentligen bara ta koden som voigtann1 paste'ade här ovanför.. Samma problem upstår där.

Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#15

superc skrev:

Du kan ju egentligen bara ta koden som voigtann1 paste'ade här ovanför.. Samma problem upstår där.

...eller så kanske du kan göra dig besväret att hjälpa folk hjälpa dig?

Folk har nämligen sällan tid eller lust att ta den koden, kopiera in i ett dokument tillsammans med stilmallen, göra en bild, spara och ladda upp på egen server för att sen, så småningom, kunna se hur sidan egentligen ser ut.

Vill du ha hjälp, så tycker jag det är ditt jobb - inte mitt eller andras.

supercMedlem sedan maj 200711 inlägg
#16

Danne V skrev:

...eller så kanske du kan göra dig besväret att hjälpa folk hjälpa dig?

Folk har nämligen sällan tid eller lust att ta den koden, kopiera in i ett dokument tillsammans med stilmallen, göra en bild, spara och ladda upp på egen server för att sen, så småningom, kunna se hur sidan egentligen ser ut.

Vill du ha hjälp, så tycker jag det är ditt jobb - inte mitt eller andras.

ja självklart,.. ska tänka på det i framtiden. :) Här kommer en länk där problemet uppstår:
http://www.e-hotellet.se/~ccc/
css: http://www.e-hotellet.se/~ccc/text.css

Om du fortfarande har tid/lust att kolla på det här så skulle det vara jättesnällt :)

headbugs avatarheadbugMedlem sedan sep. 2006867 inlägg
#17

Problemet består i vad du sätter border på.

Sätter du border på #content a:hover så får a-elementet en röd border, precis som du vill.
Men sätter du border på #content a:hover img så definierar du plötsligt bildens border, eftersom det är det element du faktiskt specificerar i din css. Och den är redan osynlig.

Mitt förslag är att du skapar en klass för bilden som du sätter i

a.enbild:hover {border: 0pt; }
Danne Vs avatarDanne VMedlem sedan aug. 20068 090 inlägg
#18

superc skrev:

ja självklart,.. ska tänka på det i framtiden. :) Här kommer en länk där problemet uppstår:
http://www.e-hotellet.se/~ccc/
css: http://www.e-hotellet.se/~ccc/text.css

Om du fortfarande har tid/lust att kolla på det här så skulle det vara jättesnällt :)

Kanon! (y)
Nu kommer folk att vara MYCKET mer benägna att hjälpa!
Själv sitter jag på Mac, så kan inte kolla i IE. Headbugs tips är nog ganska säkert. Det brukar det vara.
Men en sak kan jag ju bidra med: Din kod validerar inte. Tror inte det har med just det här felet att göra, men det kan ju vara bra att fixa det på den riktiga sidan...
http://validator.w3.org/

supercMedlem sedan maj 200711 inlägg
#19

Tack headbug, det fungerade :) Lite synd att man måste använda ytterligare en klass för att det ska fungera, men så är det ibland :)

Tack till Danne V och voigtann1 som också hjälpt mej :)

283 ms totalt · 4 externa anrop · v20260731065814-full.86ec41c2
133 ms — deklarationer (db)
0 ms — hämta statistik (cache)
147 ms — hämta tråd, inlägg och bilagor (db)
123 ms — ändringar (db)