Jak ustawić contenteditable = true, gdy się unosi?

Chcę zmienić tło elementów wewnątrz elementu div, tylko gdy są zawieszone i gdy ich właściwość contenteditable jest prawdziwa.Jak ustawić contenteditable = true, gdy się unosi?

Próbowałem:

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

Ale to nie działa. A jeśli przeniosę klasę pseudo do div:

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

następnie wszystkie pola z contenteditable = true dostać tle ... każdy trik to naprawić w czystym CSS?

EDIT: Przykład HTML:

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

Źródło

2016-02-09 Vincent Teyssier

możemy zobaczyć swój HTML zbyt? – mbacon40

Pozwoli to wybrać wszystkie bezpośrednie dzieci .myDiv z [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>

Źródło

2016-02-09 21:26:07

Chcę zmienić elementy wewnątrz div, a nie sam div –

dzięki! to działa ... jeszcze jedno pytanie, dlaczego .myDiv: hover> *, a nie .myDiv *: hover? –

@Vincent Teyssier Zaktualizowano moją odpowiedź. To wszystko wybierze wewnątrz 'myDiv' z' contenteditable = "true" ' –

Dokonać wyboru, jak trzeba było go, a następnie umieścić * obok tego.

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

Źródło

2016-02-09 21:35:52 zer00ne

dzięki, brakowało mi * –

Jak ustawić contenteditable = true, gdy się unosi?

Odpowiedz

Powiązane problemy