How to put image div container over another div, yet keep it clickable? [closed]

问题

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.

Closed 6 years ago.

I want to put my image over accordion div container and keep it clickable, so my image override it only visually. How I can do that?

My page that I need to edit is there. That's what I want to make my page look like:

THANKS IN ADVANCE!

回答1:

Actually, this is possible in most browsers with CSS (Chrome, Firefox, Safari, IOS, Android. A full list available HERE)

img {
    pointer-events: none;
}

DEMO

Not supported in IE10 or below.

There are also number of Javascript solutions including THIS ONE using Jquery that are usable in IE.

回答2:

You won't be able to sit the image over the top and have the links clickable. The only solution I can think of is to slice the image into two parts, placing one above the accordion and one to the left. Even doing that, though, will mean the blue +s will not be clickable, as the image will have to sit over them. And getting the two parts of the sliced image to match wouldn't be fun, either. (I'm sure some old browser or two would mess it up for you.)

Honestly, my suggestion is to rethink this, as it's not practical for the web. I would suggest placing the whole image as a background on the accordion and living with the girl's hand pointing to the links without actually hovering over them.

来源：https://stackoverflow.com/questions/16296689/how-to-put-image-div-container-over-another-div-yet-keep-it-clickable