将鼠标悬停在跨度上以显示下拉列表答案

【问题标题】：Hover over span to show drop down list将鼠标悬停在跨度上以显示下拉列表
【发布时间】：2014-09-18 16:49:50
【问题描述】：

当鼠标悬停在文本上时，我试图显示一个下拉列表。目前我的 html 如下：

<div class="col-sm-12">
    <span style="font-size:26px">nature : <strong class="link">DROPDOWN</strong>
        <ul class="dlist">
            <li><a href="#">A</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
        </ul>
    </span>
</div>

目前我的 CSS 如下所示：

.link:hover{
      color:green;
 }

我有点不知道在此之后要采取什么步骤来显示下拉列表。

【问题讨论】：

您在寻找 JavaScript 解决方案吗？只有CSS？你可以走很多路……
是内联元素，
是块元素。不应将块元素嵌套在内联元素中。它不会解决您的问题，但请记住这一点。
Navigation Bar with on hover drop down 的可能重复项
我想要一个 javascript 解决方案，因为我不想弄乱我的 css。我对 css 不太熟悉。
请发布您的 JS，以便我们看到您的尝试。

标签： html css

【解决方案1】：

这是adjacent sibling selector的工作：

CSS

.dlist {
    display: none;
}
.link:hover + .dlist {
    display: block;
}

【讨论】：

这行不通，因为<ul> 是<span> 的子代，而不是它的兄弟。
@flowstoneknight 没关系——在这里盘旋的是强者 (.link) 而不是 span...

【解决方案2】：

您可以使用 jquery 进行尝试。 Demo

$(document).ready(function(){
    $('span').click(function(){
        $('.dlist').toggle();
    });
});

【讨论】：

【解决方案3】：

我建议 hover 使用 jquery 并将 ul 更改为 select 元素： HTML：

<div class="col-sm-12">
    <span class="myspan" style="font-size:26px">nature : <strong class="link">DROPDOWN</strong>
        <br/>
        <select id="mydrlist" style="display:none">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
    </span>
</div>

JS：

$('.myspan').hover(function() {
    $("#mydrlist").show();
}, function() {
    $("#mydrlist").hide();
});

演示here:

【讨论】：