Combinar: después con: hover

176

Quiero combinar :aftercon :hoverCSS (o cualquier otro pseudo selector). Básicamente tengo una lista y el elemento con la selectedclase tiene una forma de flecha aplicada usando :after. Quiero que lo mismo sea cierto para los objetos que se ciernen sobre ellos pero no puedo hacer que funcione. Aquí está el código

#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
fuente

¿Has intentado agregar la regla #alertlist li: hover: after?

— Andrea

Respuestas:

225

Simplemente agregue :aftera su #alertlist li:hoverselector de la misma manera que lo hace con su #alertlist li.selectedselector:

#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: "";
}

— BoltClock
fuente

@Chris, lo que probablemente intentaste anteriormente fue :after:hover lo contrario :hover:after. Esto es lo que hice inicialmente que frustrantemente no funciona

— WickyNilliams 03 de

@WickyNilliams: Eso es por diseño (pseudo-elementos vs pseudo-clases) - ver stackoverflow.com/questions/5777210/…

— BoltClock

Esto no parece funcionar para la decoración de texto en Chrome (v43) ni en FF (v38).

— geodésico

@geoidesic: las decoraciones de texto son un problema completamente diferente. Especialmente no juegan bien con posicionamiento absoluto. Nada que ver con pseudo-elementos o la :hoverpseudo-clase.

— BoltClock

@BoltClock No estoy usando posicionamiento absoluto, pero si bien puedo cambiar el color de mi: después del contenido usando la sintaxis del selector anterior, no puedo cambiar la decoración de texto para el estado de desplazamiento del elemento: después en un enlace . De lo contrario, la decoración de texto funciona bien.

— geodésico

en scss

&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}

&:hover{
    background-color:$turkiz;
    color:#e5e7ef;

    &::after{
    content: url(images/RelativeProjectsArrHover.png);
    }
}

— Erez Lieberman
fuente

 #alertlist li:hover:after,#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: "";
}

jsFiddle Link

— Kishore Kumar
fuente

li: hover: afte agregue esto en la misma clase seleccionada

— Kishore Kumar