CODEWITHSUNDEEP
htmlcss
kyun
kyun

Reputation: 10264

box-shadow inset on parent div

.container {
  width: 320px;
  max-height: 120px;
  border: 1px solid red;
  overflow-y: auto;
  box-shadow: inset 0px -15px 10px 0px rgba(255, 0, 0, 1);
}

ul.list {
  display: grid;
  grid-template-columns: repeat(3, 33.3%);
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.list.zindex>li {
  z-index: -1;
}

ul.list>li {
  cursor: pointer;
  border: 1px solid gray;
  text-align: center;
  z-index: 0;
  padding: 8px;
}

ul.list>li:hover {
  background: blue;
}
<h1>My Code</h1>
<div class="container">
  <ul class="list">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

<h1>What I expect, but it doesn't work hover</h1>
<div class="container">
  <ul class="list zindex">
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
    <li>1</li>
  </ul>
</div>

I am struggling with box-shadow: inset.

I want to make it work hover and box-shadow both.

Upvotes: 3

Views: 95

Answers (1)

Michael Beeson
Michael Beeson

Reputation: 2875

So the problem is that you want to have the inset shadow over the grid, but for the hover to apply to the grid below. Unfortunately with negative z-index hover simply won't work...

So to achieve this you'll want to not use negative z-index, but if you keep the ul list as a child of the div with the inset shadow, you won't be able to have the shadow over the grid and also have hover.

So two things needed:

  • make the shadowed div a sibling of the ul list that is over the grid (using absolute positioning)
  • add pointer-events: none to the shadowed div so that mouse events go through it to the div below.

This also means separating out the scrollable part to a different div. This might be no good for you because it means having to give the container div a set height. But at least it might be in the right direction.

Here's a snippet:

.container {
  width: 320px;
  height: 120px;
  border: 1px solid red;
  position: relative;
}

.scrollable {
  overflow-y: auto;
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
}

ul.list {
  display: grid;
  grid-template-columns: repeat(3, 33.3%);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shadow {
  box-shadow: inset 0px -15px 10px 0px rgba(255, 0, 0, 1);
  position: absolute;
  top: 0; right: 0; left: 0; bottom: 0;
  pointer-events: none;
}

ul.list>li {
  cursor: pointer;
  border: 1px solid gray;
  text-align: center;
  z-index: 0;
  padding: 8px;
}

ul.list>li:hover {
  background: blue;
}
<h1>Using sibling div</h1>
<div class="container">
  <div class="scrollable">
    <ul class="list zindex">
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
  <div class="shadow"></div>
</div>

Upvotes: 4

Related Questions