css - 悬停时如何更改特定元素？

Question

所以问题是当我将鼠标悬停在文本上时，我希望它只改变文本的颜色，但斜线也会改变颜色。我该如何解决？感谢您抽出时间。

我试过 :not(:hover) 但它似乎不起作用。我不知道我是否在某处误解了这一点。

这是我尝试使用 :not(:hover) 的代码

const Mya = styled.a`
    display:inline-block;
    color:${props => (theme[props.state][0])};
    text-decoration:none;
    position:relative;
    text-transform: capitalize;
    padding-left: 10px;
    font-weight:600;
    font-size:15px;
    font-family:Helvetica;
    margin: 0 0 0 10px;

    :before{
        content:"/";
        position:relative;
        margin-right:10px;
        :not(:hover){
            color:#cbcbcb;
        }
    };

    :first-child:before{
        content:"";

    }

    :after{
        content:"";
        position:relative;
        display:inline-block;
    };

    :hover{
        color:#186af8;

    };
`

Answer 1

如果您在 :before 之上定义 :hover 并在 :before{color:#fff;} 中定义颜色，那么颜色应该正确继承。

https://jsfiddle.net/7ym3q2jx/

const Mya = styled.a`
display:inline-block;
color:${props => (theme[props.state][0])};
text-decoration:none;
position:relative;
text-transform: capitalize;
padding-left: 10px;
font-weight:600;
font-size:15px;
font-family:Helvetica;
margin: 0 0 0 10px;

:hover{
    color:#186af8;
};

:before{
    content:"/";
    position:relative;
    margin-right:10px;
    color:#cbcbcb;
};

:first-child:before{
    content:"";

}

:after{
    content:"";
    position:relative;
    display:inline-block;
};


`