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

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 所提到的，您无法在伪元素上定义悬停操作。您可以做的是在您的 HTML 标记中使用 opacity:0; 创建刻度线作为 absolute 定位元素。

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

在父元素上悬停操作时，您可以像这样更改不透明度:

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

对于刻度线本身，你可以像这样定义一个悬停 Action :

#tickMark:hover {
      color: green;
}

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