CODEWITHSUNDEEP
javascriptjquerycssbackground-color
jchwebdev
jchwebdev

Reputation: 5460

Is there a way to detect if there is an image in a lower z-index?

Our site has a typical multi-level drop down menu. So it's on a fixed DIV at a high z-index. (Eg. the Wordpress admin. The text colours for each link are black with a transparent background.) The problem is that on some pages, these menu items are hard to read because there may be an image underneath so the transparent background makes the text obscured.

Is there a way for the menu item to detect that there is an image (or a div with a similar dark colour) at a lower z-index in the same position? That way, I could use JS or jQuery to conditionally style the to a lighter colour for just those menu items on those specific pages.

In CSS there is the mix-blend-mode property, which doesn't work for images, but that's kinda what I'm looking for---a way to detect the underlying color and adjust the color of the text accordingly so that it's always legible.

Upvotes: 0

Views: 79

Answers (1)

grateful
grateful

Reputation: 1128

Using only javascript you could start here: Getting the z-index of a DIV in JavaScript?

Because you want to fint the z-index of multiple items at once, it would be easier if you used jQuery see here: https://api.jqueryui.com/zIndex/

With jQuery you could select elements that fall within a certain area of the screen defined by the bounding box of the image below and have a greater z-index value and add a class to them that removes the transparent quality.

As @charlietfl noted in the comments, it's a lot of work for something that could be achieved much more simply.

Upvotes: 1

Related Questions