时间戳

首页 > 解决方案 > 当链接位于`后面时如何使链接可点击

`

html - 当链接位于`后面时如何使链接可点击
`

问题描述

如何让渐变出现在图片上方，同时链接可点击？

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

.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>

标签： htmlcss

解决方案

<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>

推荐阅读