Question

当鼠标悬停在文本上时，我正在尝试显示一个下拉列表..目前我的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;
 }

我有点坚持在此之后采取什么步骤来显示下拉列表。

Answer 1

这是adjacent sibling selector的作业：

<强> CSS

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

Answer 2

您可以使用jquery尝试它。 Demo

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

Answer 3

我建议使用jquery hover并将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：

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

3 个答案: