CSS (또는 다른 의사 선택기) :after
와 결합하고 싶습니다 :hover
. 기본적으로 목록이 있고 selected
클래스가있는 항목 에는를 사용하여 화살표 모양이 적용됩니다 :after
. 가리키고 있지만 제대로 작동하지 않는 객체에 대해서도 마찬가지입니다. 여기 코드가 있습니다
#alertlist
{
list-style:none;
width: 250px;
}
#alertlist li
{
padding: 5px 10px;
border-bottom: 1px solid #e9e9e9;
position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
color: #f0f0f0;
background-color: #303030;
}
#alertlist li.selected:after
{
position:absolute;
top: 0;
right:-10px;
bottom:0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #303030;
content: "";
}
<ul id="alertlist">
<li>Alert 123</li>
<li class="selected">Alert 123</li>
<li>Alert 123</li>
</ul>
#alertlist li : hover : after 규칙을 추가하려고 했습니까?
—
안드레아