我将鼠标悬停在ul
生成的箭头上时显示div:after
。我该如何实现呢?
.select-wrapper {
position: relative;
width: 250px;
-webkit-box-sizing: border-box;
}
.select-wrapper:after {
content: "\25BC";
display: block;
}

<div class="select-wrapper">
<span>Select an option</span>
<ul>
<li>Item-1</li>
<li>Item-2</li>
</ul>
</div>
&#13;
当鼠标悬停在箭头上方时,我想显示这些项目。
答案 0 :(得分:1)
IMO不可能使用伪类:after。要么为箭头创建一个额外的元素,要么只使用wohle select元素。
.select-wrapper {
position: relative;
width: 250px;
-webkit-box-sizing: border-box;
}
.select-wrapper:after {
content: "\25BC";
display: block;
position: absolute;
left: 0;
top: 20px;
}
.select-wrapper ul {
display: none;
}
.select-wrapper:hover ul {
display: block;
}
<div class="select-wrapper">
<span>Select an option</span>
<ul>
<li>Item-1</li>
<li>Item-2</li>
</ul>
</div>
更新:精确定位箭头
.select-wrapper {
position: relative;
width: 250px;
-webkit-box-sizing: border-box;
}
.arrow {
display: inline-block;
width: 0;
height: 0;
border-top: 8px solid #000;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
.arrow ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.arrow:hover ul {
display: block;
}
<div class="select-wrapper">
<span>Select an option</span>
<div class="arrow">
<ul>
<li>Item-1</li>
<li>Item-2</li>
</ul>
</div>
</div>