[HTML] :target e :hover

[amaranthinemess]

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]

Usando JQuery potresti fare così:

<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]

Usando JQuery potresti fare così:

<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!

 

[Max 1]

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:

$(#cont2)

 

[amaranthinemess]

Ah allora forse modificando gli id ho aggiunto le virgolette e adesso funziona (non me ne ero accorta!)

 

[|$Alessandro$|]

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:

<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>