悬停到已经悬停的元素的目标

Question

我正在尝试实现一种悬停效果，当div悬停时，使用以下代码显示刻度标记：

#asked-question-answers .question.ref-ans:hover::before{
    content: '\e8a7';
    speak: none;
    display: inline-block;
    font: normal normal normal 24px/1 'Material-Design-Icons';
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    transform: translate(0,0);
    position: absolute;
    left: 20px;
    margin-top: 20px;
    font-size: 34px;
    color: #ccc;
}

现在我想使用以下（失败的尝试）代码在该刻度线上选择悬停，以便灰色刻度变为绿色：

#asked-question-answers .question.ref-ans::before:hover{
    color: green;
}

Answer 1

如Paulie_D和CBroe所述，您无法在伪元素上定义悬停操作。您可以做的是使用absolute在HTML标记中将刻度标记创建为opacity:0;定位元素。

 #asked-question-answers .question.ref-ans #tickMark {
      position: absolute;
      top: ...;
      left: ...;
      opacity: 0;
      // other styling
}

对父元素进行悬停操作时，您可以像这样更改opacity：

#asked-question-answers .question.ref-ans:hover #tickMark {
      opacity: 1;
}

对于刻度标记本身，您可以定义像这样的悬停操作：

#tickMark:hover {
      color: green;
}

请记住，您可以指定任何可接受的选择器类型而不是#tickMark。