Target for Hover to an already Hovered element

Question

I am trying to accomplish a hover effect in which when a div is hover a tick mark is appeared using the following code:

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

Now I want to apply hover selected on that tick mark using following(failed try) code so that the gray tick becomes green:

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

Basically, you can't - http://stackoverflow.com/questions/5777210/how-to-write-hover-condition-for-abefore-and-aafter — Paulie_D, Jan 15 '16 at 22:01
If the tick mark becomes green on hover, then as a user I’d expect it to be some kind of control element (most likely checkbox functionality) – so why in that case is it only displayed via a CSS pseudo element, instead of being an ``? — CBroe, Jan 15 '16 at 22:33

score 1 · Accepted Answer · answered Jan 16 '16 at 00:03

As mentioned by Paulie_D and CBroe, you are not able to define hover action on pseudo elements. What you can do instead is to create the tick mark as an absolute positioned element in your HTML markup with opacity:0;.

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

On hover action on the parent element, you can change opacity like this:

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

For the tick mark itself, you can define a hover action like this:

#tickMark:hover {
      color: green;
}

Remember that you can specify any acceptable type of selector instead of #tickMark.

Target for Hover to an already Hovered element

1 Answers1