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

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
}

在父元素上悬停操作时，您可以这样更改 opacity：

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

对于刻度线本身，您可以像这样定义一个悬停动作：

#tickMark:hover {
      color: green;
}

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

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

Target for Hover to an already Hovered element

css

jquery

hover