Home/ Questions/Q 8332287
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:40:41+00:00

I’d like to do text highlighting by hovering a div behind the text via

  • 0

I’d like to do text highlighting by hovering a div behind the text via z-index*. If the element containing the text doesn’t have a background, it works fine:

enter image description here

However, if the element has a background or background-color, it doesn’t work as the background blocks the view of the div that’s behind it:

enter image description here

Of course I can make the div be on top, but that looks terrible, as it colors the text itself:

enter image description here

You can see this problem in action with jsfiddle here. My question is: how can I have a div go behind the text but above the background?

* Why am I not using a span like everyone else? Because with div I can animate the highlighting’s movement from word to word. That’s in the jsfiddle also.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://jsfiddle.net/V3Kae/9/
    you could do it like this. setting the z-index of the container to be lower then the highlight, an the z-index of the text to be higher then the highlight.

    • 0