hover del parent viene attivato anche andando sul child (chrome)

**breezse** · 09-08-2013, 12:17

Ciao a tutti,
ho un problema con chrome, quando creo dinamicamente un "albero" di div , se vado sopra col mouse su un figlio si attiva anche hover del padere, ho provato ad aggiungere anche z-index, ma niente

codice:

<div conj="AND" id="root"  class="Group">
	[img]images/arrow_dark.gif[/img]
	<div id="group1"  issubquery="true" class="SubQuery" style="margin-left: 20px; padding-left: 3px;">
		[img]images/no_brace.gif[/img]
		<div id="group2"  issubquery="false" class="Group" style="margin-left: 20px; padding-left: 3px;">
			[img]images/braces.gif[/img]
		</div>
	</div>
	<div id="group3"  issubquery="false" class="Group" style="margin-left: 20px; padding-left: 3px;">
			[img]images/braces.gif[/img]
	</div>
</div>

e il css:

codice:

.SubQuery
{
    background-color: #ffffff;
    cursor: pointer;
}
.Group
{
    background-color: #ffffff;
    cursor: pointer;
}

div.SubQuery:hover 
{
	background-color: #dfecf7;
    cursor: pointer;
}

div.Group:hover
{
	background-color: #555555;
    cursor: pointer;
}

quindi se vado sul group1 mi si attiva anche hover di root, se vado su group2 mi si attiva group1 and root, se vado su group3 mi si attiva root(in quanto e' il solo parent).

avete qualche idea? o ho commesso qualche errore?

**breezse** · 09-08-2013, 13:18

per farvi un esempio veloce, icollate questo codice

codice:

<!DOCTYPE html>
<html>
<head>
<style>
div.Group
{
background-color:white;
}
div.Group2
{
background-color:white;
}
div.Group:hover
{
background-color:yellow;
}
div.Group2:hover
{
background-color:red;
}
</style>
</head>

<body>
<div class="Group">root
<div class="Group">figlio primo grado
<div class="Group2">         figlio secondo grado
<div class="Group">               figlio tezo grado

</div >
</div >
</div >
<div class="Group">figlio primo grado</div >
</div >

</body>
</html>

qui:
http://www.w3schools.com/cssref/tryi...ycss_sel_hover
e testatelo, cosi dovrebbe essere piu' chiaro(io vorrei che si evidenziasse solo la linea selezionata)

**ac_socmel** · 09-08-2013, 14:42

non c'è alcun errore
si comporta come previsto

**breezse** · 09-08-2013, 15:03

e non conosci un modo per farlo funzionare come se al posto di "div" ci sia "p"?

codice:

<p class="Group">root
  <p class="Group">1st child
    <p class="Group2">2nd child
      <p class="Group">3rd child

      </p >
    </p >
  </p >
  <p class="Group">1st child
  </p >
</p>

DEMO

**ac_socmel** · 09-08-2013, 15:10

un

non può contenere altri

a questo punto è ovvio che ti mancano le basi
ti consiglio di seguire una guida per i tuoi primi passi

**breezse** · 09-08-2013, 15:20

lo so, ma e' l'unica soluzione che ho trovato per ora, e' per questo che ho chiesto per qualcosa di piu' elegante

**ac_socmel** · 09-08-2013, 15:37

allora è meglio se spieghi il tuo progetto per bene, magari mostrando un esempio funzionante che ti ha ispirato
e soprattutto mostrando un link dove stai provando

**breezse** · 09-08-2013, 15:47

L'avevo gia' postato su nel link, ma probabilmente ho fatto un po' di casino, provo a riordinare il tutto

mi piacerebbe avere come risultato finale questo:

risultato desiderato

so che qui ho usato p, ma e' questo il risultato che vorrei avere

Usando div il risultato e' il seguente:

risultato attuale con div

P.s: grazie per l'attenzione che ci stai mettendo

Discussione: hover del parent viene attivato anche andando sul child (chrome)

Strumenti discussione

Ricerca discussione

Visualizza

hover del parent viene attivato anche andando sul child (chrome)

Permessi di invio