我想:after与:hoverCSS(或任何其他伪选择器)结合使用。我基本上有一个列表,并且selected该类的项目有一个使用:after. 我希望对于悬停但无法使其正常工作的对象也是如此。这是代码
:after
:hover
selected
#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>
只需像使用选择器一样附加:after到您的选择器:#alertlist li:hover``#alertlist li.selected
#alertlist li:hover``#alertlist li.selected
#alertlist li.selected:after, #alertlist li:hover: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: ""; }