html - 无法悬停在包装器 Div 上工作

Question

我需要你的帮助。

我似乎无法让悬停在包装器/容器 DIV 上正常工作

CSS：

#myhover:hover {
    border: 1px solid red;
}

HTML：

<div id="myhover" style="background: #ffffff; 
      width: 177px; height: 20px; border: 1px solid #808080;">
    <div style="float: left;">
        <input id="refdocs" style="padding-left: 4px; padding-right: 3px; 
                  height: 15px; width: 158px; border: none;" type="text">
    </div>
    <div style="line-height:18px; font-size: 11pt;  color: #779297;">+</div>
</div>

Answer 1

因为内联样式是级联中最具体的，所以它们可以覆盖您不希望它们覆盖的东西。将您的#myhover样式移动到样式表中，然后它应该可以正常工作。

例如：

#myhover {
    background: #ffffff; 
    width: 177px; 
    height: 20px; 
    border: 1px solid #808080;
}

jsfiddle：http: //jsfiddle.net/va8Bz/

Answer 2

您的style属性正在覆盖您的样式表选择器。它更具体。

您在这里有三个选择：

1. 将您的样式移出style属性。
2. 将您的样式移出style属性。
3. 添加!important到应该覆盖style属性中的样式声明。

我建议您将样式从style属性中移出到样式表中。

示例：http: //jsfiddle.net/Y7NW9/

Answer 3

您需要将所有 CSS 粘贴在样式表中，而不是使用内联样式。

你想要完成的事情也可以用更少的标记来完成：

<div class="container">
    <input class="refdocs" type="text">
    <div class="icon">+</div>
</div>

然后在您的 CSS 样式表中：

.container {
    display: inline-block;
    position: relative;
}

.input-wrapper {
    float: left;
}

.refdocs {
    border: 1px solid #808080;
    padding: 2px;
    padding-right: 14px;
    margin: 0;
}

.refdocs:hover {
    border: 1px solid red;
}

.icon {
    font-size: 11pt;
    position: absolute;
    top: 3px;
    right: 5px;
}

这是一个工作演示

Answer 4

我在您之前的问题中为您解决了这个问题：

#add {
    float: right;
    width: 20px;
    height: 20px;
    cursor: pointer;
    text-align: center;
}
#add:hover {
    color: #f00;   
}

http://jsfiddle.net/kUSBM/

请回答问题或接受答案。