a:hover animacija v IE
3 naročniki
3 naročniki
sem nardil en simple meni, in pri mouse over je ena kratka gif animacija na linku. v FF dela vse kot po maslu, v IE pa ne. Kako bi nardil, da bi mi v IE delalo, oz, ker vem da to verjetno ne bo šlo, kaki bi naredil, da mi v IE pa pokaže eno drugo sliko na a:hover
hvala za pomoč
12 odgovorov
daj kodo prilimaj, da vidim kaj točno bi ti rad. Skor gotovo obstaja pot, ki bo delovala za ff in ie.
#menu{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(test.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
#menu ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#menu ul li{display:block;float:left;margin:0 1px 0 0;}
#menu ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;width:100px;}
#menu ul li a:hover{color:#fff;background:transparent url(test1.gif) repeat-x top center;}
In ta test1.gif, je fade effect, da se spremeni barva v bacgroundu linka
a bi lahko še kako izboljšal tole kodo :D lol skrajšal morda :D
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Shop of Ceramics</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="center">
<div id="ban"><img src="banner.gif" style="padding:0; float:left;" />
<div id="menu">
<ul>
<li><a href="" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Our Work</a></li>
<li><a href="" title="">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content">
<table><tr>
<td width="120"><script type="text/javascript"><!--
googleadclient = "pub-2305066161436390";
/* Ceramic Shop */
googleadslot = "7519949298";
googleadwidth = 120;
googleadheight = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
<td width="710">
<h3>Welcome</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras scelerisque eros eu purus. Aliquam sit amet arcu. Aenean auctor dolor in metus. Maecenas convallis. Proin ut ligula at orci laoreet porta. Sed malesuada, arcu sed mollis placerat, nisi urna ullamcorper augue, nec sollicitudin nisi felis quis erat. Aliquam sodales lectus at purus commodo facilisis. Curabitur fermentum sem eget neque. Nullam a metus. Phasellus velit. Ut imperdiet fermentum dui. Proin in lacus id arcu placerat semper. Morbi vitae tellus quis ligula sagittis pharetra. Aenean bibendum nibh eget urna. Phasellus pretium sem nec sem. Phasellus nec felis sed felis tincidunt tempus.<br /><br />
Integer at nunc. Pellentesque vitae quam in leo lobortis fringilla. Cras ornare, augue vel gravida pretium, mauris odio semper tortor, nec facilisis velit nunc in nulla. Praesent nec lacus. Suspendisse consectetuer tincidunt nisi. Suspendisse tincidunt leo non mi mattis auctor. Nam eu nibh ac mauris semper vulputate. Etiam eu justo. Duis laoreet egestas orci. Proin lectus sapien, placerat nec, rhoncus a, tempor et, orci. Proin imperdiet porttitor dolor. Etiam in orci in dolor congue suscipit. Nullam non nisi. Integer sapien urna, ultricies in, blandit in, condimentum et, turpis. Praesent ut velit id nisi sagittis ullamcorper. Nunc porta, leo ac luctus sagittis, libero ligula rutrum turpis, in gravida neque felis non leo.<br /><br />
Curabitur mollis. Mauris ac massa. Quisque rutrum. Cras purus. Aliquam id purus. Quisque sodales tortor eu felis. Fusce fermentum tortor sit amet quam. Vivamus elementum. Nunc consequat. Sed at mauris. Ut eu tortor. Aenean condimentum, dolor et malesuada interdum, dolor sem varius purus, nec fermentum purus quam sit amet sem. Sed fringilla. Praesent commodo diam eu diam. Duis convallis porta nulla. Proin porttitor, mauris ut sollicitudin commodo, lacus ipsum tincidunt purus, ut imperdiet mauris ante sit amet felis. Nunc non eros nec urna aliquam condimentum. Aliquam quis sapien eget ipsum aliquet lacinia. Proin malesuada. Mauris pulvinar rutrum mauris.
</p>
</td>
<td width="120"><script type="text/javascript"><!--
googleadclient = "pub-2305066161436390";
/* Ceramic Shop */
googleadslot = "7519949298";
googleadwidth = 120;
googleadheight = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr></table>
</div>
</div>
</body>
</html>
Evo ga :) na vrhu je meni
Recimo, da bo tole delovalo
#menu {
height:42px;
font-size:11px;
font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;
text-transform:uppercase;
}
#menu:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
width:auto;
background: transparent url(test.gif) repeat-x top left;
}
#menu ul li {
display: inline;
}
#menu ul li a {
float:left;
color:#FBDAFA;
text-decoration:none;
padding:14px 22px 0 22px;
height:28px;width:100px;
margin: 0;
}
#menu ul li a:hover {
color:#000;
background:transparent url(test1.gif) repeat-x top center;
}
prav tako ne dela v IE (v FF dela tako kot prej)
ampak zdaj, tudi privzeto ozadje linka ni vidno. Je transparentno, medtem ko je bilo prej vidno.
A morda veš kaj je narobe?
najlepša ti hvala za tvoj čas!
sem rešo vse, enostavno nisem nardil backgrounda privzetega v ul ampak v a. ne vem sicer zakaj, ampak zdaj dela :)
hvala ti nas-t1 !
No jaz delam tele menije malo drugače.
Primer kako jaz delam:
CSS:
#navi {
background:url(images/navi_bg.jpg) repeat-x;
width:auto;
}
.navi {
float:left;
line-height:30px;
border-right:1px solid #000;
}
#navi a {
color:#FFFFFF;
background:url(navi_bg.jpg) repeat-x;
text-decoration:none;
font-weight:bold;
padding-left:10px;
padding-right:10px;
}
#navi a:hover {
background:url(navibgrollover.jpg) repeat-x;
}
HTML:
<div id="navi">
<a href="" class="navi">Home</a>
<a href="" class="navi">About us</a>
<a href="" class="navi">Services</a>
<a href="" class="navi">Our work</a>
<a href="" class="navi">Contact us</a>
</div>
a pa deluje to, če hočeš nastavit specifično širino in višino?
torej, če hočeš dat za background celo sliko, in ne simple repeat?
tud deluje, sam potem je najbolše če daš v vsak link div in njemu določiš širino/višino,
npr. <a href="" class="navi"><div class="navi-div">HOME</div></a>
Obstaja pa še en način, sam vsebuje javascript.