Question 266746 in Html Question posted in
Some basic documentation can be found here.

Html – Apply hover styling only on the element that I am direclty hovering

I have multiple elements with a class called h-me. The markup looks somewhat like this:

<span class="h-me">
  <span class="h-me">
    <span class="h-me">
    x
    </span>
    <span class="h-me">
    y
    </span>
  </span>
</span>

The CSS looks like this:

.h-me:hover {
  background: rgba(0, 0, 0, 0.1);  
}

When I am hovering over the span tag with content "x", it changes the background of all the span elements because I am technically hovering over all of them.

Is there any way to only change the background of the element that I am strictly hovering over?

There are two restriction here.

  1. I cannot change the markup in any way. I will have to rely on some CSS or JavaScript trickery to get it done.

  2. The markup doesn’t stay fixed. It will change very frequently.

The markup will typically be like this:

<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height: 1em; vertical-align: -0.25em;"></span><span style="margin-right: 0.1076em;" class="h-me mathnormal">f</span><span class="mopen">(</span><span class="h-me mathnormal">x</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right: 0.2778em;"></span></span><span class="base"><span class="strut" style="height: 2.3846em; vertical-align: -0.9703em;"></span><span class="mop"><span style="margin-right: 0.4445em; position: relative; top: -0.0011em;" class="mop op-symbol large-op">∫</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 1.4143em;"><span class="" style="top: -1.7881em; margin-left: -0.4445em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="h-me mtight"><span class="h-me mtight">−</span><span class="h-me mtight">∞</span></span></span></span><span class="" style="top: -3.8129em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="h-me mtight">∞</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.9703em;"><span class=""></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="h-me accent"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height: 0.9579em;"><span class="" style="top: -3em;"><span class="pstrut" style="height: 3em;"></span><span style="margin-right: 0.1076em;" class="h-me mathnormal">f</span></span><span class="" style="top: -3.2634em;"><span class="pstrut" style="height: 3em;"></span><span class="accent-body" style="left: -0.0833em;"><span class="h-me">^</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height: 0.1944em;"><span class=""></span></span></span></span></span><span class="mopen">(</span><span style="margin-right: 0.046em;" class="h-me mathnormal">ξ</span><span class="mclose">)</span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="h-me"><span class="h-me mathnormal">e</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height: 0.8991em;"><span class="" style="top: -3.113em; margin-right: 0.05em;"><span class="pstrut" style="height: 2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="h-me mtight"><span class="h-me mtight">2</span><span class="h-me mathnormal mtight">πi</span><span style="margin-right: 0.046em;" class="h-me mathnormal mtight">ξ</span><span class="h-me mathnormal mtight">x</span></span></span></span></span></span></span></span></span><span class="mspace" style="margin-right: 0.1667em;"></span><span class="h-me mathnormal">d</span><span style="margin-right: 0.046em;" class="h-me mathnormal">ξ</span></span></span>

Thanks.

Tags:

2

Answers


  1. 0

    You have to use :not() and :has() css functions in a combo to get the required result. Example given below:

    .h-me:not(:has(.h-me)):hover {
  background: rgba(0, 0, 0, 0.1);
}
    <span class="h-me">
  <span class="h-me">
    <span class="h-me">
      x
    </span>
    <span class="h-me">
      y
    </span>
  </span>
</span>
    Login or Signup to reply.
  2. 0

    The pointer-events property in CSS may be used to apply hover style just to the element that is currently under your direct mouse cursor without altering the markup. Here’s the code:

    .h-me:hover {
background: rgba (0, 0, 0, 0.1)
}

    By using this code, "h-me" elements will be able to collect hover events, but only the element you are immediately hovering over will have its background changed; all other "h-me" elements will remain transparent to pointer events.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search