当链接位于`后面时如何使链接可点击<div> `

Question

如何让渐变出现在图片的顶部并且链接可以同时点击？

滚动时渐变需要粘性。 有可能这样做吗？ 目前，滚动条也不能正常工作..

 .container{ position: relative; } .image-dog { width:200px; height:100px; } a:hover{ cursor:pointer; } .directory { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; justify-content: space-between; white-space: nowrap; scroll-behavior: smooth; } .gradient { width: 100%; height: 100%; left: 0; top: 0; right: 0; background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%); position: absolute; z-index: 100; }

 <div class="container"> <div class="directory"> <div class="gradient"> </div> <div class="owner"> <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> </div> </div> </div>

Answer 1

<style> 
.container{
  position: relative;
  top: -20px;
}
.image-dog {
  width:200px;
  height:100px;
}
a:hover{
  cursor:pointer;
}

.directory {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  justify-content: space-between;
  white-space: nowrap;
  scroll-behavior: smooth;
}

.gradient {
    width: 100%;
    height: 20px;
    left: 0;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%);
    position: sticky;
    z-index: 999;
}

</style>

 <div class="gradient">
            </div>
        <div class="container">
                <div class="directory">

                  <div class="owner">
                      <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                      <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a>
                  </div>

                </div>
              </div>

Answer 2

只需应用pointer-events: none; 到您的渐变以使其“点击”：

 .container { position: relative; } .image-dog { width: 200px; height: 100px; } a:hover { cursor: pointer; } .directory { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; justify-content: space-between; white-space: nowrap; scroll-behavior: smooth; } .gradient { width: 100%; height: 100%; left: 0; top: 0; right: 0; background-image: linear-gradient(to right, red 1%, rgba(255, 255, 255, 0) 4%, rgba(255, 255, 255, 0) 85%, blue 100%); position: absolute; z-index: 100; pointer-events: none; }

 <div class="container"> <div class="directory"> <div class="gradient"> </div> <div class="owner"> <a class="image-dog" href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> <a href="https:///www.google.com"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="A black, brown, and white dog wearing a kerchief"></a> </div> </div> </div>