CODEWITHSUNDEEP
javascriptjqueryhtmlcssevents
ladybug
ladybug

Reputation: 323

How to make an element with z-index=-1 receive click events?

I have a div with horizontal scroll with many images inside it. the div has an 1- inner shadow which should appear on it's children but the 2- children should be able to receive pointer events. Yet the 3- div should also be able to receive some pointer events to enable scrolling. I've been searching and thinking for hours now. And I can't find any solution to achieve all of these three tasks at the same time. Does anyone have any idea on how I can get this done?

Here is my code:

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
  pointer-events:none;
}

div > img{
  z-index:-1;
  position:relative;
}
<div>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
</div>

Upvotes: 2

Views: 2410

Answers (2)

yukashima huksay
yukashima huksay

Reputation: 6238

This almost does what you want. if you want the div not to move you have to set it's position to fixed and put it right where you want it to be on the window. I think it's better to use the third div for shadowing instead of pushing the elements you care about behind.

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  position:relative;
}

div::before {
  content: '';
  position: absolute;
  width:100%;
  height:100%;
  box-shadow: inset 0 0 10px #000000;
  pointer-events:none;
}
<div>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
  <img onclick="alert()" src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
</div>

Upvotes: 1

K.F
K.F

Reputation: 469

It's possible that I am not understanding all the constraints, but perhaps you can wrap your internal images into another html element? for example:

  <div>
    <figure onclick="alert('hello')">
      <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
    </figure>
    <figure onclick="alert('goodbye')">
      <img src="http://www.claireking.com/wp-content/uploads/2018/01/images.png"></img>
    </figure>
  </div>

and use the following css:

div {
  overflow-x: auto;
  overflow-y: hidden;
  height: 150px;
  width: 100px;
  white-space: nowrap;
  box-shadow: inset 0 0 10px #000000;
  position: relative;
}

figure {
  /* just for this example: */
  height: 50%; 
  width: 150%;
  margin: 0;
}

div img{
  z-index:-1;
  position:relative;
}

You can play with this here: https://jsbin.com/kuzawemame/edit?html,css,output

Upvotes: 3

Related Questions