Question

我想更改div中元素的背景，只有在悬停时以及属性满足时才真实。

我试过了：

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

但它不起作用。如果我将伪类移动到div：

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

然后所有具有contenteditable = true的字段都会得到背景......在纯CSS中修复它的任何技巧？

编辑：HTML示例：

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

Answer 1

这将选择class thread_wrapper { public: thread_wrapper() : thread([this]() { this->the_func(); }) { } void wait_until_done() { boost::unique_lock<boost::mutex> lock(join_mutex); thread.join(); } private: void the_func() { // ... } boost::mutex join_mutex; boost::thread thread; } .myDiv

的所有直接子女

＆＃13;

[contenteditable="true"]

＆＃13;

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

＆＃13;

Answer 2

按照你的方式制作选择器，然后在它旁边放一个*。

＆＃13;

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

＆＃13;

徘徊时如何设计contenteditable = true？

2 个答案: