Vad gör IE med min hover?

[IvanB]

Jag har en mycket fiffig hover-effekt på www.test.farstasaxen.se. Det ser ut som om det skulle vara javascript, men det är rena rama css.Den funkar perfekt i alla webläsaren utom i IE. Om du för muspekaren över de små nagelbilderna, de stora bilder poppar upp i mitten av sidan. Var tar hover-bilderna vägen i IE?

 

[Stefan@Klientsidan]

Hej,

bilderna dyker upp i internet explorer 7, så jag tippar på att det är internet explorer 6 som har problem med följande selektor:

#links a:hover img

Jag tror helt enkelt inte att IE6 stöder den.

 

/Mvh Stefan - klientsidan.se

 

[Jonas__B]

helt rätt av Stefan.

Jag ville inte tro på det först så jag testade.

Man får sätta ändringen på a-selectorn

img,
a img { border: none; }
#mydiv {padding: 5px;}
#mydiv a{
	text-decoration: none; 
	padding: 3px; 
	border: 2px solid #eee;
	margin: 2px 4px 5px;
	}
#mydiv a:hover {border-color:#333;}

 

<div id="mydiv">
	<a href="#">
		<img src="ajax-loader.gif" width="31" height="31" alt="Loader" />
	</a>
	<a href="#">
		<img src="ajax-loader.gif" width="31" height="31" alt="Loader" />
	</a>
	<a href="#">
		<img src="ajax-loader.gif" width="31" height="31" alt="Loader" />
	</a>
	<a href="#">
		<img src="ajax-loader.gif" width="31" height="31" alt="Loader" />
	</a>
</div>

 

[IvanB]

Tack.

img,

a img

?

Det var någonting nytt för mig. Jag har aldrig använt kommatecken så här. Men är det inte så att img utan . eller # ska fungera som typselektor, den ska påverka alla mina img på sidan? Jag förstår inte riktigt, hur jag ska tillämpa exemplet.

 

[Jonas__B]

just kommatecken är för att separera flera element som skall ha samma attribut.

#header,
#content,
#footer 
{
width: 100%;
padding: 10px;
color:#111;
}
#content 
{
color: #333;
}

 

Att göra på detta viset gör att det blir mindre kod och lättare att överblicka.

 

 

 

[Jonas__B]

i ditt specifika exempel vet jag ej då jag inte vet om du genomgående ska ha ram på bilder eller ej. men som oftast har man inte det utan använder då en klass på de bilder som ska ha ram

 

[IvanB]

Jag tror inte att ram är problem för mig. Det är bara att bestämma hur border ska se ut, det klarar jag. Jag hinner bestämma om det. När jag försöker tillämpa dina kod, får jag de stora bilderna ständigt på bilden. Den stora bilden ska poppa upp endast som hover, när muspekaren pekar på img-platsen, där bakgrundsbilden ligger centrerad i ensam majestät och låtsas vara en liten förgrundsbild.

 

 

[inlägget ändrat 2009-01-25 23:14:54 av IvanB]

[Jonas__B]

får jag de stora bilderna ständigt på bilden. Den stora bilden ska poppa upp endast som hover, när muspekaren pekar på img-platsen, där bakgrundsbilden ligger centrerad i ensam majestät och låtsas vara en liten förgrundsbild.

Jag förstod ingenting av det du skrev.

Å andra sidan har jag inte titta på din sida.

 

[mac3]

hejsan

 

ett tips

du kan sätta en genomskinlig gif bild i img.

sen kan du tillämpa de bakgrundsbildarna hjälp av a:link och a:hover

 

a:link { background-image: url(bild_on.jpg);}

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

a:active { text-decoration: none; color: #CC3333}

a:hover { background-image: url(bild_over.jpg); }

 

 

<a href="#"><img src="genomskinlig.gif" width="31" height="31" alt="Loader" /></a>