jquery - HTML选择下拉选项在背景上重叠问题

Question

我对 HTML 选择下拉选项有一个小问题。我单击了 HTML 下拉列表，但没有从下拉列表中选择任何选项，将光标移动到“显示背景”标签。下拉列表中的选项现在与背景重叠。

也可以在http://mansri.com/issues/select-dropdown/index.html找到一个示例

下面是我的 HTML、CSS 和 jQuery 代码。

HTML 代码

<div style="margin-top: 120px; width: 80%; margin-left: auto; margin-right: auto;">
    <a href="#" class="show-backdrop">Show Backdrop</a>
    <div class="backdrop">
            &nbsp;
    </div>
    <select>
        <option>Select Any</option>
        <option value="">sadf</option>
        <option value="">qewrqer</option>
        <option value="">xxccvcv</option>
        <option value="">;lkj;lkjdssf</option>
    </select>
    <br>

</div>

CSS

.backdrop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #000;
  opacity: 0.8;
  display: none;
}

.backdrop-show {
  display: block;
}

jQuery

$('.show-backdrop').hover(function(){
    $('.backdrop').addClass('backdrop-show');
});

在悬停时显示背景时，如果显示选择下拉选项，它不应与我的背景重叠。

提前感谢您为此提供解决方案。

标签： jqueryhtmlcss