Just nu i M3-nätverket
Jump to content

Vad gör IE med min hover?


IvanB

Recommended Posts

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?

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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.

 

 

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

  • 2 weeks later...

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>

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...