悬停时显示ul：div

Question

我试图显示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>

当鼠标位于该箭头，我想显示的项目。

Answer 1

IMO这是不可能的伪类，如：后。要么为箭头创建一个附加元素，要么只使用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>