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属性会覆盖样式表选择器。它更具体。

这里有三个选项：

将您的样式移出style属性。
将您的样式移出style属性。
将!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;
}

<强> Here's a working demo

Answer 4

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

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

http://jsfiddle.net/kUSBM/

请回答问题或接受答案。

无法让鼠标悬停在Wrapper Div上工作

4 个答案: