懸停時顯示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>