:hover IE e div, lo risolviamo oppure js?

**oronze** · 11-12-2007, 20:39

Salve, ho fatto una miriade di ricerche e visto tantissimi link (anche sul forum) ma non ne vengo a capo...è possibile solo con css questo su IE?

codice:

#nav_1 a:link, #nav_1 a:visited{
	background-color: #823A9D;
}
#nav_1 a:hover{
	z-index:2;
}
#nav_2 a:link, #nav_2 a:visited{
	background-color: #FFBA00;
	top: -140px;
	left: 10px;
}
#nav_2 a:hover{
	z-index:2;
}

codice:

<div id="nav_1">Link 1<p class="descr">In questa pagina trovi bla hjgkyk hkg ky hkgkjqwfl jofijw fi iw fiw jfoijf iof qf jqofjfjo owi fjoqifj  joij gky gh y gh kgy gkhjg ky gkjh lsakjd oi dl fjasoli jfalsjf qoi fwio</p></div>
<div id="nav_2">Link 2<p class="descr">In questa pagina trovi bla hjgkyk hkg ky hkgkjqwfl jofijw fi iw fiw jfoijf iof qf jqofjfjo owi fjoqifj  joij gky gh y gh kgy gkhjg ky gkjh lsakjd oi dl fjasoli jfalsjf qoi fwio</p></div>

o devo usare per forza js?

**fcaldera** · 11-12-2007, 21:04

dal codice che hai postato non è chiaro cosa ti aspetti che faccia

**oronze** · 11-12-2007, 21:27

come no? che cambi il/la z-index e poi vorrei spostarlo ma quello non so ancora se sta bene nel layout

vorrei che il div passi in primo piano

**fcaldera** · 12-12-2007, 00:18

Originariamente inviato da oronze
...che cambi il/la z-index e poi vorrei spostarlo ...
vorrei che il div passi in primo piano

Con il css che hai postato tu l'unica cosa che succede all'hover è che il link assume z-index:2 (e non ha effetti se il link non ha position absolute o relative), ma il div non cambia in nessun modo

div a:hover {
... /* tutte le proprietà qui dentro si riferiscono al link, non al div*/
}

non c'è modo di riferirsi ad un div all'interno del quale c'è un link allo stato hover

**pr0v4** · 12-12-2007, 12:10

Però si potrebbe evidenziare tutto il div con un certo riutilizzo dei tooltip in CSS. Se vai a controllare a questo tutorial, vedrai qualcosa di simile a quello che volevi fare!

**oronze** · 14-12-2007, 12:54

ciao, ho visto ma nn ho capito come adattarlo al mio caso....chi mi aiuta e lo adatta alle mie esigenze? perchè con firefox riconosce l'hover sui div, con l'explorer, no! se io nel div che è, ipotizziamo 100*250 px, ho un link; come faccio a far occupare al link l'intero div e quindi associare a entrambi z-index = 1? con display:block funziona qualcosa? non riesco proprio a venirne a capo...non vorrei usare js, solo per questioni di accessibilità, ma se non è un grossissimo problema posso pure optare per un semplicissimo js

**fcaldera** · 14-12-2007, 13:01

se mi spieghi cosa stai cercando di fare posso provare a darti un suggerimento... ancora non ho capito a cosa dovrebbe servire quel codice che hai postato.

Non c'è un esempio da qualche parte che si può vedere?

**oronze** · 18-12-2007, 17:02

no, mi spiace...cmq...spiego....spero di essere chiaro....
ho 4 div (il numero è irrilevante, potrebbe anche aumentare)
questi div sono lunghi 200px
questi div sono sovrapposti fino a metà...il primo ha left:0, il secondo left:100px e così via
questi div hanno un link al loro interno
ogni div vorrei fosse cliccabile (l'intero div, non solo la parola del link)
vorrei inoltre che passando sopra con il muose il div venga in primo piano, quindi z-index = 10 ad esempio....
come fare? se nn vi è chiaro qualche punto posso provare a postarvi il codice html+css...lo ricreo e ve lo mando

**oronze** · 20-12-2007, 12:07

e dopo dotto c'è uppolo

**oronze** · 20-12-2007, 16:40

ecco l'html:

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" lang="it" xml:lang="it">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Entropia" />
<meta name="description" content="Entropia" />
<meta name="author" content="Massimiliano Calamita" />
<title>Esempio di layout</title>
<link type="text/css" rel="stylesheet" href="costanti/stile.css" />
</head>
<body>


dsadsadasfhsdfkjh  jkfh jksh fjsh lsaj hjasf </p>
<div>
<div id="nav_1">Link 1<p class="descr">In questa pagina trovi bla hjgkyk hkg ky hkgkjqwfl jofijw fi iw fiw jfoijf iof qf jqofjfjo owi fjoqifj  joij gky gh y gh kgy gkhjg ky gkjh lsakjd oi dl fjasoli jfalsjf qoi fwio</p></div>
<div id="nav_2">Link 1<p class="descr">In questa pagina trovi bla hjgkyk hkg ky hkgkjqwfl jofijw fi iw fiw jfoijf iof qf jqofjfjo owi fjoqifj  joij gky gh y gh kgy gkhjg ky gkjh lsakjd oi dl fjasoli jfalsjf qoi fwio</p></div>
<div id="nav_3">Link 1<p class="descr">In questa pagina trovi bla hjgkyk hkg ky hkgkjqwfl jofijw fi iw fiw jfoijf iof qf jqofjfjo owi fjoqifj  joij gky gh y gh kgy gkhjg ky gkjh lsakjd oi dl fjasoli jfalsjf qoi fwio</p></div>
<div id="nav_4">Link 1<p class="descr">In questa pagina trovi bla hjgkyk hkg ky hkgkjqwfl jofijw fi iw fiw jfoijf iof qf jqofjfjo owi fjoqifj  joij gky gh y gh kgy gkhjg ky gkjh lsakjd oi dl fjasoli jfalsjf qoi fwio</p></div>
</div>
[img]costanti/img/angolo_dx.jpg[/img]
</body>
</html>

e questo è il css

codice:

body{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #345678;
	color: #CCCCCC;
	margin: 0px;
	height: 100%;
}
a.p_link:link, a.p_link:visited{
	text-decoration: none;
	color: #CCCCCC;
	border-bottom: 1px solid #FFFFFF;
}
a.p_link:hover{
	border:0;
	background-color: #6D93AD;
}
#nav_1 a, #nav_2 a, #nav_3 a, #nav_4 a{
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	position: relative;
	width:300px;
	height:150px;
	display:block;
}
.l_titoli{
	margin:0;
	padding:10px;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration:none;
	text-align:justify
}
.descr{
	margin:0;
	padding-top:10px;
	font-size: 12px;
	font-weight: normal;
}
#nav_1 a:link, #nav_1 a:visited{
	background-color: #823A9D;
}
#nav_1 a:hover{
	z-index:2;
}
#nav_2 a:link, #nav_2 a:visited{
	background-color: #FFBA00;
	top: -140px;
	left: 10px;
}
#nav_2 a:hover{
	z-index:2;
}
#nav_3 a:link, #nav_3 a:visited{
	background-color: #8AC109;
	top: -280px;
	left: 20px;
}
#nav_3 a:hover{
	z-index:2;
}
#nav_4 a:link, #nav_4 a:visited{
	background-color: #C06B00;
	top: -420px;
	left: 30px;
}
#nav_4 a:hover{
	z-index:2;
}

grazie ancora

Discussione: :hover IE e div, lo risolviamo oppure js?

Strumenti discussione

Ricerca discussione

Visualizza

:hover IE e div, lo risolviamo oppure js?

Permessi di invio