:hover e :target

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 :=):

Se predisponi il codice HTML correttamente, puoi utilizzare il selettore + del CSS.

Ad esempio:

Codice:

---

<style>
.bottoni-e-scatole a:hover + div {
  color: red;
}
</style>

<!-- ...... -->

<ul class="bottoni-e-scatole">
  <li>
    <a href="#">Bottone uno</a>
    <div>Scatola 1</div>
  <li>
    <a href="#">Bottone due</a>
    <div>Scatola 2</div>
</ul>

---

a + div va a selezionare i <div> che seguono un <a>, e l':hover limita al passaggio del mouse.