Geek Answers Handbook

How is the style contenteditable = true on hover?

I want to change the background of elements inside a div only when they freeze and when their contenteditable property is true.

I tried:

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

But that will not work. And if I moved the pseudo-class to a div:

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

Then all fields with contenteditable = true will get the background ... any trick to fix this in pure css?

EDIT: HTML example:

 <div id="myDiv"> <span contenteditable="true">blabla</span> <div "subdiv" contenteditable="true">blibli</div> </div>
+8
css
source share
2 answers

This will select all direct children of .myDiv using [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>
+1
source share

Make the selector the way you had it, then put * next to it.

 <!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>
+1
source share

More articles:


All Articles