html - CSS 悬停规则只需要应用于父级

Question

我在 div 中有一个简单的文本框，我希望在悬停在 div 上时应用悬停规则，但不是文本框。

代码:

<div id="div1" style="display:inline-block; border:1px solid #777777; padding:16px; background-color:#eeeeee;">
    <input type="text" name="txt1" id="txt1" />
</div>

#div1:hover {
    background-color:#ffffff !important;
    cursor:pointer;
}

JSFiddle

悬停在文本框上时，不得应用 div 的悬停规则。有没有不用 JavaScript 就能做到这一点的方法？

Answer 1

这是您正在寻找的……吗？请看 fiddle 。

HTML

<div id="container" >
  <div id="div1" style="">
  </div>
  <input type="text" name="txt1" id="txt1" />
</div>

CSS

#div1:hover{
 background-color:red !important;
 cursor:pointer;
}
#container{
 position:absolute;
}
#div1{
 position:absolute;
 display:block; 
 border:1px solid #777777; 
 padding:16px; 
 width: 180px;
 background-color:#eeeeee;
}

#txt1{
 top:5px;
 left:5px;
 background-color:white !important;
 position:absolute;
}

http://jsfiddle.net/8NRNQ/4/