[HTML] :target e :hover

amaranthinemess

Nuovo Utente
18 Giu 2019
4
0
1
Milano
www.elenaspadafora.it
Buongiorno a tutti, non mi sembra di aver visto un topic simile già aperto, in caso contrario mi scuso


Ciò che vorrei è che, passando il mouse su un elemento A venisse evidenziato un elemento B.
Esempio: fila di bottoni sopra, fila di box sotto, passando su un bottone si evidenzia il relativo box.

Conosco questo effetto utilizzando :target ma si attiva cliccando sull'elemento A, io invece vorrei che la modifica all'elemento B si attivasse solo passando col mouse (come per un :hover).

Spero di essermi spiegata bene, grazie mille a chiunque vorrà aiutarmi
 

Tommy03

Utente Attivo
6 Giu 2018
489
49
28
17
Bassano del Grappa (VI)
Usando JQuery potresti fare così:
HTML:
<div id="cont1">Passa sopra il mouse</div>
<div id="cont2">Contenuto che verrà evidenziato</div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script>
$("#cont1").hover(function(){
  $(#cont2).css("background-color", "yellow");
  }, function(){
  $("#cont2").css("background-color", "white");
});
</script>
 

amaranthinemess

Nuovo Utente
18 Giu 2019
4
0
1
Milano
www.elenaspadafora.it
Usando JQuery potresti fare così:
HTML:
<div id="cont1">Passa sopra il mouse</div>
<div id="cont2">Contenuto che verrà evidenziato</div>
<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>
<script>
$("#cont1").hover(function(){
  $(#cont2).css("background-color", "yellow");
  }, function(){
  $("#cont2").css("background-color", "white");
});
</script>
Ciao grazie mille:) Ma dovrebbe già funzionare così? Perché non succede nulla :(

EDIT: Come non detto, grazie mille, se al posto degli id uso le classi funziona! Grazie!
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.280
330
83
EDIT: Come non detto, grazie mille, se al posto degli id uso le classi funziona! Grazie!
Non è un problem di id o classe non funziona perchè c'è un errore di sintassi, manca le virgolette qui:
Codice:
$(#cont2)
 

|$Alessandro$|

Nuovo Utente
9 Ago 2019
7
0
1
Ciao amaranthinemess, ho visionato la tua richiesta e penso che ci sia un modo più semplice di gestirla anziché utilizzare JavaScript o Php. La mia proposta è quella di utilizzare il semplice CSS nel seguente modo:

HTML:
<div id="cont1">Passa sopra il mouse</div>
<div id="cont2">Contenuto che verrà evidenziato</div>

<style>
#cont1:hover~#cont2{
 /*Qua puoi modificare lo stile css del contenitore 2.*/
}
</style>
 
Ultima modifica di un moderatore: