Think Google Chrome’s “Inspect Element.” When a user mouses over a line in Developer Tools, the element is “highlighted” on the screen. I am trying to replicate the same functionality, except that an element may be highlighted when a user mouses over that element instead of from a list.
My problem is this: When I highlight the element (by creating a div with a translucent background color with the same dimensions as the original element and positioned in the same location as the original element), the div has to be painted higher than that element (in order to be visible.) However, in some cases where there are sub elements that should be highlight-able, the “highlight” div is on top, preventing them from being select-able.
Some of the elements will have background images or colors, preventing the highlighting from showing up. Also, the markup may contain any number of elements with variating z-index values. I’ll update my question to reflect these constraints.
I’m looking for any suggestions for work-arounds or alternatives if this is not possible.
Here’s a fiddle to show what I mean.
Thanks in advance!
You can use CSS3
pointer-events:none;: http://jsfiddle.net/Shmiddty/BU27J/9/Alternatively, you can use
z-index:-1;, but if your “highlighted” elements have a background of their own, you won’t see the highlighting div.