Ich möchte :after
mit :hover
in CSS (oder einem anderen Pseudo-Selektor) kombinieren . Ich habe im Grunde eine Liste und das Element mit der selected
Klasse hat eine Pfeilform, die mit angewendet wird :after
. Ich möchte, dass das Gleiche für Objekte gilt, über die man schwebt, die ich aber nicht zum Laufen bringen kann. Hier ist der Code
#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>
css
css-selectors
pseudo-element
Chris
quelle
quelle
Antworten:
Einfach anhängen
:after
zu Ihrem#alertlist li:hover
mit Ihrem Selektor auf die gleiche Weise tun#alertlist li.selected
Selektor:quelle
:after:hover
im Gegensatz zu:hover:after
. Dies ist, was ich anfangs getan habe, was frustrierend nicht funktioniert:hover
Pseudoklasse zu tun .in scss
quelle
jsFiddle Link
quelle