:hover

akp

Utente Attivo
8 Giu 2015
133
0
16
Salve io ho questa situazione :
css:
Codice:
.container {
background-color : blue;
}

.uno:hover , .due:hover {
background-color:yellow;
}

html:
HTML:
<div class="container">
 <div class="sub">
  <a class="uno">1</a>
  <a class="due">2</a>
</div>
</div>

so che il css è sbagliato.
io vorrei che al passaggio del mouse su "class=uno" o su "class=due" il colore del div "conteiner" diventasse giallo.
qualcuno sa come poter risolvere?
 

n1k4r0

Utente Attivo
15 Nov 2012
135
0
0
mi sa che non si può stilare il contenitore con eventi sul contenuto col solo css, dovresti farlo da javasript
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css">
.uno:hover {
	background: #FFE500;
}
</style>
</head>

<body>
<div class="container">
 <div class="sub">
  <a class="uno">1</a>
  <a class="due">2</a>
</div>
</div>
</body>
</html>
 

WmbertSea

Moderatore
Membro dello Staff
MOD
28 Nov 2014
432
73
28
Ciao, in linea di massima concordo con n1k4r0.
Attualmente lo standard CSS non supporta la selezione di elementi genitori (anche se ci sono in ballo delle proposte per tale integrazione), per cui non è possibile agire su elementi genitori attraverso elementi figli/discendenti. La selezione degli elementi avviene sempre in modo discendente e progressivo secondo la disposizione gerarchica degli elementi del DOM, ovvero non è possibile avere una selezione ascendente (e, giusto per chiarire, nemmeno una selezione disgiunta).

In questi casi è sempre buono ricordarsi che, anche proprio per questo motivo, si parla di CSS, cioè "Cascading Style Sheets", per cui la selezione degli elementi (nonché l'applicazione delle regole stesse) avviene sempre a "cascata".

Giusto per capirci: hai mai provato a nuotare controcorrente per risalire una cascata? Chiaramente l'esito non può che essere negativo, anche nel caso tu fossi Francesca Pellegrini in persona.
Però, volendo puoi sempre usare un elicottero per poter tornare in cima alla cascata.
Nel tuo caso l'elicottero si chiama JavaScript.

Chiaramente con qualche riga di JavaScript puoi risolvere il problema in modo relativamente semplice.

Tuttavia, in diversi casi, è possibile aggirare l'ostacolo sempre via CSS con l'uso di qualche barbatrucco.

Giusto per diletto, o provato a creare una soluzione secondo ciò che hai chiesto.
Ho risolto utilizzando il pseudo-elemento/pseudo-classe :before che andrà a posizionarsi sullo sfondo del div contenitore, con l'effetto visivo di cambiarne il colore, anche se tecnicamente si tratta di una sovrapposizione di elementi.

Qui un esempio di una possibile situazione. Ho immaginato la presenza di più elementi .sub e la possibilità di definire diversi colori (chiaramente sono tutte cose in più rispetto alle più semplici indicazioni del primo post):
Codice:
<style type="text/css">
  /* un po' di style sui contenitori */
  .container {
    position: relative;
    background-color: grey;
    padding: 10px;
    color: white;
    text-shadow: 0 1px 2px black;
    z-index: 0;
  }
  .sub {
    background-color: silver;
    margin: 10px;
    padding: 10px 10px 10px 0;
  }      
  .sub>a {
    font-weight: bold;
    background-color: black;
    padding: 0 10px;
  }
  
  /* la mia paletta dei colori */
  .sub>a.giallo {color: yellow;}
  .sub>a.giallo:before {background-color: yellow;}
  
  .sub>a.rosso {color: red;}
  .sub>a.rosso:before {background-color: red;}
  
  .sub>a.rosa {color: violet;}
  .sub>a.rosa:before {background-color: violet;}
  
  .sub>a.celeste {color: cyan;}
  .sub>a.celeste:before {background-color: cyan;}
  
  .sub>a.verde {color: green;}
  .sub>a.verde:before {background-color: green;}
  
  .sub>a.arancione {color: orange;}
  .sub>a.arancione:before {background-color: orange;}
  
  /* quando sono sopra <a>, creo un before che va a coprire lo sfondo del container, colorandolo */
  .sub>a:hover:before {
    content: '';
    position: absolute;
    top:0; right:0; bottom: 0; left:0;
    z-index: -2;
  }
  
  /* questo occorre per impedire l'hover involontario sui before dei .sub>a, così da evitare che lo sfondo resti colorato anche uscendo da <a> */
  .container:before {
    content: '';
    position: absolute;
    top:0; right:0; bottom: 0; left:0;
    z-index: -1;
  }
</style>
Codice:
<div class="container">
  container
  <div class="sub uno">
    sub uno<br>
    <a href="#" class="uno celeste">1_1</a>
    <a href="#" class="due verde">1_2</a>
  </div>
  <div class="sub due">
    sub due<br>
    <a href="#" class="uno giallo">2_1</a>
    <a href="#" class="due arancione">2_2</a>
  </div>
  <div class="sub tre">
    sub tre<br>
    <a href="#" class="uno rosso">3_1</a>
    <a href="#" class="due rosa">3_2</a>
  </div>
</div>

Sia chiaro che si tratta pur sempre di un accrocchio e che JavaScript si presta sicuramente meglio in questo tipo di situazioni.
 

akp

Utente Attivo
8 Giu 2015
133
0
16
grazie a tutti per le risposte date. Ho risolto con la funzione di jquery "mouseover"
 
Discussioni simili
Autore Titolo Forum Risposte Data
P modifica colore A Hover link website . WordPress 2
amaranthinemess [HTML] :target e :hover HTML e CSS 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
Andrea_Ventura [HTML] Problemi con effetto hover HTML e CSS 5
Sermatth72 [HTML] creare link con colori Hover diversi, possibile? HTML e CSS 6
U Hover su immagine escluso titolo - flexbox Presentati al Forum 0
U [HTML] Hover su immagine escluso titolo - flexbox HTML e CSS 3
S [HTML] Effetto hover in un div HTML e CSS 6
otto9due Lampeggiamento solo su .hover(), inizia ma non riesco a fermarlo! jQuery 2
otto9due .hover() perchè non va in questo caso? jQuery 2
greven [WordPress] [CSS3] Inserire Hover Effect sul menù WordPress 10
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
F Problema hover voce di menù Javascript 2
M sottomenu all hover su voce contattaci jQuery 2
A Simulazione :hover su touch device Javascript 1
P Hover HTML e CSS 1
Shyson jQuery, togliere css hover jQuery 1
L Effetto hover con jquery jQuery 2
F mappa jquery con effetto hover + fancybox Javascript 1
F Come si chiama questo effetto hover? Javascript 1
H Problema hover img jQuery 6
M [RISOLTO] Problema con 'a:hover' HTML e CSS 12
Shyson Mettere hover a css in linea HTML e CSS 1
P Effetto a:hover sempre attivo solo se si và su una voce del sottomenu HTML e CSS 1
A Stato di :hover su dispositivi Touch-Screen HTML e CSS 6
P Problema con hover div jQuery 2
A hover impostare bordo HTML e CSS 9
Dexter_90 [AIUTO] Modificare proprieta Css tramite hover con Javascript Javascript 4
Dexter_90 [AIUTO] Modificare proprieta Css tramite hover HTML e CSS 4
S strano comportamento a:hover su immagine HTML e CSS 7
andre9004 Dropdown menu con .hover() jQuery 2
D Eventi: si possono modificare proprietà css di un el. B tramite un hover su un el. A? HTML e CSS 0
S [JQUERY] immagine che resta attiva all'hover jQuery 4
S Usare l'hover jQuery 4
F Arrotondare angoli hover HTML e CSS 3
D attivazione dei suoni all'hover in jQuery jQuery 0
voldemort jquery: live con hover jQuery 1
M Come utilizzare :hover senza documento .css HTML e CSS 4
davide1982 Problema animazione con animate e hover Javascript 4
I CSS - hover HTML e CSS 3
S link e hover con i css HTML e CSS 2
M problema con hover/visited menu HTML e CSS 2
F css: -moz-border-radius e :hover HTML e CSS 0
cerbero a:hover HTML e CSS 4
C Hover Cella HTML e CSS 2

Discussioni simili