Differenze ie - ff su pseudoclasse hover

**sitodue** · 26-08-2012, 20:19

Ciao a tutti;
ho un problema con un menù di navigazione che sto provando ad integrare in un mio sito e che se visualizzato in internet explorer online mi da un malfunzionamento, mentre si visualizza correttamente se lo testo in locale (sempre con ie) e altrettanto correttamente con firefox (sia in locale che in remoto).

Il codice completo è il seguente:

codice:

<!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=iso-8859-1" />
<title>13 Styles Orange Gloss Menu</title>

<style type="text/css">
.rhm1{
	width:780px;
	height:64px;
	margin:0 auto;
	background:url(images/rhm1_bg.gif) repeat-x;		
}
.rhm1-left{
	background:url(images/rhm1_l.gif) no-repeat;
	width:15px;
	height:64px;
	float:left;
}
.rhm1-right{
	background:url(images/rhm1_r.gif) no-repeat;
	width:15px;
	height:64px;
	float:right;
}
.rhm1-bg{
	background:url(images/rhm1_bg.gif) repeat-x;
	height:64px;
}
.rhm1-bg ul{
	list-style:none;
	margin:0 auto;
}
.rhm1-bg li{
	float:left;
	list-style:none;
}
.rhm1-bg li a{
	float:left;
	display:block;
	color:#ffe8cc;
	text-decoration:none;
	font:12px 'Lucida Sans', sans-serif;
	font-weight:bold;
	padding:0 0 0 18px;
	height:64px;
	line-height:40px;
	text-align:center;
	cursor:pointer;	
}
.rhm1-bg li a span{
	float:left;
	display:block;
	padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
	color:#fff;
	background:url(images/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
	color:#fff;
	background:url(images/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
	color:#fff;
	background:url(images/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
	color:#fff;
	background:url(images/rhm1_hover_r.gif) no-repeat right 5px;
}

</style>

</head>

<body>
<div class="rhm1">
<div class="rhm1-right"></div>
<div class="rhm1-left"></div>
<div class="rhm1-bg">
<ul>
	<li class="current"><span>Home</span>
	[*]<span>About Us</span>
	[*]<span>Services</span>	
	[*]<span>Products</span>		
	[*]<span>Contact Us</span>	[/list]
</div>
</div>
</body>
</html>

Ed è visualizzabile a questo link:

http://www.visualizzazioni.altervist...yums/menu.html

Io ho modificato i tag[*] ed ho aggiunto uno script che fa si che al click su ogni voce del menù corrisponda un'immagine differente che compare a tutta pagina nel body, in questo modo:

codice:

<ul>
<li id="yums"><a onclick="showHide('yums')"><span>Yums!</span></a>
<li id="chi"><a onclick="showHide('chi')"><span>Chi?</span></a>
<li id="cosa"><a onclick="showHide('cosa')"><span>Cosa?</span></a>	
<li id="come"><a onclick="showHide('come')"><span>Come?</span></a>[*]<span id="news">News</span>			
<li id="contatti"><a onclick="showHide('contatti')"><span>Contattaci!</span></a>[/list]

<div id="yums_par">[img]images/index.png[/img]</div>
<div id="chi_par">[img]images/chi.png[/img]</div>
<div id="cosa_par">[img]images/cosa.png[/img]</div>
<div id="come_par">[img]images/come.png[/img]</div>
<div id="contatti_par">[img]images/contatti.png[/img]</div>

E lo script che viene richiamato è il seguente:

codice:

<script type="text/JavaScript">

menu = new Array();

function showHide(theid){
	for (id in menu) {
		var objParagrafo = document.getElementById(menu[id]);
		objParagrafo.className = 'hide';
		var objMenu = document.getElementById(id);
		objMenu.className = '';
		}
    var objParagrafo = document.getElementById(menu[theid]);
    objParagrafo.className = 'show';
	var objMenu = document.getElementById(theid);
    objMenu.className = 'current';  
}

function showHideAll()
{
  menu['yums'] = 'yums_par';	
  menu['chi'] = 'chi_par';	
  menu['cosa'] = 'cosa_par';	
  menu['come'] = 'come_par';	
  menu['contatti'] = 'contatti_par';
  showHide('yums');
}
</script>

In pratica lo script non fa altro che far apparire di default la prima immagine, rendendo selezionato il primo tasto del menù al caricamento della pagina, e poi cliccando sugli altri tasti viene cambiata l'immagine;
Quello che non funziona più è la pseudoclasse hover al passaggio del mouse sulle voci di menù - funziona soltanto sul tasto "News" al quale ancora non ho associato un'immagine corrispondente.
Non riesco a capirne il motivo, poichè la pseudoclasse dovrebbe essere richiamata al passaggio del mouse e quindi prima del click sul tasto che poi attiva la funzione...
Inoltre come dicevo, se apro la pagina con firefox, tutto funziona correttamente e lo stesso con internet explorer se apro la pagina sul mio pc invece che in remoto!
Grazie infinite a chiunque mi darà una mano!

**Prill** · 28-08-2012, 16:47

Con Firefox nella tua pagina vedo solo un effetto rollover sui link

**sitodue** · 31-08-2012, 17:50

si è corretto, li c'è caricato solo il menù... è proprio quello l'effetto che sparisce se visualizzo la pagina con ie..
Lo stesso menù invece visualizato in locale con lo stesso ie funziona perfettamente...

Discussione: Differenze ie - ff su pseudoclasse hover

Strumenti discussione

Ricerca discussione

Visualizza

Differenze ie - ff su pseudoclasse hover

Permessi di invio