Grazie mille a Mike e Robertc per i loro utili post!
Se hai due elementi nel tuo HTML e desideri :hover
sovrascriverne uno e scegliere come target un cambio di stile nell'altro, i due elementi devono essere direttamente correlati: genitori, figli o fratelli. Ciò significa che i due elementi devono essere uno all'interno dell'altro oppure devono essere entrambi contenuti nello stesso elemento più grande.
Volevo visualizzare le definizioni in una casella sul lato destro del browser mentre i miei utenti leggevano il mio sito e i :hover
termini evidenziati; pertanto, non volevo che l'elemento "definizione" fosse visualizzato all'interno dell'elemento "testo".
Ho quasi rinunciato e ho appena aggiunto javascript alla mia pagina, ma questo è il futuro, per favore! Non dovremmo tollerare la retroassistenza di CSS e HTML che ci dice dove dobbiamo posizionare i nostri elementi per ottenere gli effetti che vogliamo! Alla fine abbiamo compromesso.
Mentre gli elementi HTML effettivi nel file devono essere nidificati o contenuti in un singolo elemento per essere validi :hover
obiettivi reciproci, l' position
attributo css può essere utilizzato per visualizzare qualsiasi elemento dove vuoi tu. Ho usato position: fixed per posizionare il bersaglio della mia :hover
azione dove lo volevo sullo schermo dell'utente indipendentemente dalla sua posizione nel documento HTML.
Il codice HTML:
<div id="explainBox" class="explainBox"> /*Common parent*/
<a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light /*highlighted term in text*/
</a> is as ubiquitous as it is mysterious. /*plain text*/
<div id="definitions"> /*Container for :hover-displayed definitions*/
<p class="def" id="light"> /*example definition entry*/ Light:
<br/>Short Answer: The type of energy you see
</p>
</div>
</div>
Il css:
/*read: "when user hovers over #light somewhere inside #explainBox
set display to inline-block for #light directly inside of #definitions.*/
#explainBox #light:hover~#definitions>#light {
display: inline-block;
}
.def {
display: none;
}
#definitions {
background-color: black;
position: fixed;
/*position attribute*/
top: 5em;
/*position attribute*/
right: 2em;
/*position attribute*/
width: 20em;
height: 30em;
border: 1px solid orange;
border-radius: 12px;
padding: 10px;
}
In questo esempio, la destinazione di un :hover
comando da un elemento all'interno #explainBox
deve essere #explainBox
o anche all'interno #explainBox
. Gli attributi di posizione assegnati a #definitions lo costringono ad apparire nella posizione desiderata (all'esterno #explainBox
) anche se tecnicamente si trova in una posizione indesiderata all'interno del documento HTML.
Capisco che è considerato una forma errata utilizzare lo stesso #id
per più di un elemento HTML; tuttavia, in questo caso le istanze di #light
possono essere descritte in modo indipendente a causa delle loro rispettive posizioni in #id
elementi univoci. C'è qualche motivo per non ripetere id
#light
in questo caso?
~
per "il cubo è da qualche parte dopo il contenitore nel DOM e condivide un genitore"