Question

当用户将鼠标悬停在图像上时，我有一些代码会生成一个弹出窗口（在div中创建）。但是一旦我将这段代码放入div中，弹出窗口就不再出现了。

HTML：

    <div id="tabs" style="width:100%">  
    <div id="wellsTab" style="position:relative; left: background-image:url(buttons/wells_background_off.png); 
            background-repeat:no-repeat; width:120px; height:35px; float:left; ">
        <a style="color:lightgrey;" href="someLink" id="wellsButton" >
            <img style="float:left; padding:8px 0px 41px 7px;" id="DivBtn5" name="DivBtn5" src="buttons/wells_text.png" border="0">
            </div>
                <div id="wellsFilter">
                <p class="toolheader">Well Age Group</p>
                <table>
                    <tr>
                        <td>
                            <img src="markers/Wells1.png" />
                            <label>Today</label>
                        </td>
                        <td>
                            <input type="checkbox" checked onclick='boolToday=!boolToday;filterWellLicenses();'>
                        </td>
                    </tr>
                    <tr>
                        ...
                    </tr>
                </table>
            </div>
        </a>
    </div>
        </div>

CSS代码：

#wellsFilter
{
    display:none;
    position:absolute;
    left:980px;
    top:35px;
    background-color:#e5e5e5;
    border:1px solid #828282;
    padding: 0 10px 10px 10px;
    _padding-top: 10px; /*for IE only*/
    _padding-bottom: 10px; /*for IE only*/
    /*width:230px;*/
    opacity:0.93;
    filter:alpha(opacity=93); /* For IE8 and earlier */
    z-index: 1000000000; /* Be on top of splitter */
}

#wellsFilter img
{
    float:left;
}



#wellsFilter label
{
    float:left;
    margin-left: 10px;
}

#wellsFilter input
{
    margin: 0 0 0 10px;
}

#wellsFilter .toolheader
{
    margin-right: 20px;
}

#tabs:hover+#wellsFilter
{
    display:block;
}

#wellsButton:hover + #wellsFilter
{
    display:block;
}

#wellsFilter:hover
{
    display:block;
}

为什么我的弹出窗口会在元素位于父div容器内时立即停止工作？我尝试过各种各样的填充和绝对值设置，但没有任何效果。

编辑 - 删除javascript链接，因为人们认为这是问题所在。

编辑 - 添加井过滤器代码

编辑 - 更新HTML代码以匹配页面上的内容，并通过我尝试修复CSS来更新CSS。

Answer 1

问题似乎是您的adjacent选择器。 +符号将仅选择前一个元素前面的元素。如果#wellsFilter没有紧接#wellsButton之前的含义则无效。

你需要这样的东西：

<div id="tabs" style="width:100%">
    <a  href="somelink" id="wellsButton" >
        <img style="float:left; padding:8px 0px 41px 7px;" src="buttons/wells_text.png" />
    </a>
</div>
<div id="wellsFilter">
    <p class="toolheader">Age Group</p>
</div>

然后改变这个：

#wellsButton:hover + #wellsFilter
{
    display:block;
}

对此：

#tabs:hover + #wellsFilter
{
    display:block;
}

HTML-CSS - 一旦将代码放入div中，悬停时自定义div弹出不会出现

1 个答案: