Come stile contenteditable = true quando ci si libra?

Voglio cambiare lo sfondo degli elementi all'interno di un div, solo quando sono al passaggio del mouse e quando la loro proprietà contenteditable è vera.Come stile contenteditable = true quando ci si libra?

ho provato:

#myDiv[contenteditable="true"]:hover { background-color: rgba(217, 245, 255,0.5);}

Ma non funziona. E se mi trasferisco la classe pseudo al div:

#myDiv:hover [contenteditable="true"] { background-color: rgba(217, 245, 255,0.5);}

Allora tutti i campi con contenteditable = true ottenere il fondo ... ogni trucco per riparare quello in puro css?

EDIT: HTML Esempio:

<div id="myDiv"> 
    <span contenteditable="true">blabla</span> 
    <div "subdiv" contenteditable="true">blibli</div> 
</div>

fonte

2016-02-09 Vincent Teyssier

Possiamo vedere il codice HTML troppo? – mbacon40

Questo selezionerà tutti i figli diretti di .myDiv con [contenteditable="true"]

.myDiv:hover > *[contenteditable="true"] { 
 
    background-color: rgba(217, 245, 255,0.5); 
 
}

<div class="myDiv"> 
 
    <p contenteditable="true">Lorem ipsum dolor sit amet.</p> 
 
    <span contenteditable="true">Lorem ipsum dolor.</span> 
 
    <p contenteditable="false">Lorem ipsum dolor.</p> 
 
</div>

fonte

2016-02-09 21:26:07

Voglio cambiare gli elementi all'interno del div, non il div stesso –

grazie! che funziona ... un'altra domanda, perché .myDiv: hover> * e non .myDiv *: hover? –

@Vincent Teyssier Aggiornato la mia risposta. Questo selezionerà tutto all'interno di 'myDiv' con' contenteditable = "true" ' –

Fai il selettore come si doveva, poi porre * Vicino a esso.

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled Document</title> 
 
    <style> 
 
    #editor[contenteditable="true"]:hover * { 
 
     border: 3px inset grey; 
 
     width: 400px; 
 
     height: 200; 
 
     margin: 30px; 
 
    } 
 
    #editor .editable:hover { 
 
     background-color: rgba(217, 245, 255, 0.5); 
 
    } 
 
    .circle { 
 
     border-radius: 60px; 
 
     width: 30px; 
 
     height: 30px; 
 
     background: red; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div id="editor" class="editable" contenteditable="true"> 
 
    XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXxxxxxxxxxxxxxxxxxxxxxxXXXXXXXXXXXXXXX|||||||||||||||||||| 
 
    <br/> 
 
    <div class="circle"></div> 
 
    <div class="editable"></div> 
 
    </div> 
 
</body> 
 

 
</html>

fonte

2016-02-09 21:35:52 zer00ne

grazie, mi mancava il * –

Come stile contenteditable = true quando ci si libra?

risposta

Problemi correlati