-1

当用户将鼠标悬停在图像上时，我有一些代码会产生一个弹出窗口（在 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 链接，因为人们认为这是问题所在。

编辑 - 添加 wellsFilter 代码

编辑 - 更新了 HTML 代码以匹配页面上的内容，并使用我的新尝试修复它更新了 CSS。

4

1 回答 1

2

问题似乎是您的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;
}
于 2013-09-06T22:12:41.320 回答