Question

请耐心等待我，因为我对html / css不太熟悉

我尝试输出带有彩色叠加和链接的图像。文本如下，因为图像将是缩略图大小，并且不适合。

问题：当我悬停时，我无法将链接置于叠加层之上，因此我添加了标记为“index”的两个CSS部分以尝试在悬停时更改链接的索引，但现在叠加层是走了:(

也许我不明白z-index是如何工作的，或者我错误的是：hover语法？

<div class="port_container">
<a href="http://hup.o-zen.de" class="port_link">
<img src="http://google.com" alt="some text" class="port_image">
</a>
<div class="port_overlay">
</div>
</div>
<p>text goes here</p>

.port_container {
 position: relative;
 width: 50%;
 }

.port_image {
 display: block;
 width: 100%;
 height: auto;
 }

.port_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #ff6600;
  }

 /* added index*/
 .port_link {
  position: relative;
  transition: z-index 0s;
  z-index: 0;
  }
 /*index on hover*/
.port_link:hover {
 transition: z-index 0.5s ease;
 z-index: 1;
 }

.port_container:hover .port_overlay {
 opacity: 0.5;
 }

我读到在链接中包装整个div并不完全支持，所以我不会走那条路，希望你能在代码中发现我的错误。

谢谢

Answer 1

.port_overlay模糊了该链接，向其中添加pointer-events:none将会修复该链接。我重写并改进了这一点，不需要这样做，叠加层是图像的一部分。

在Codepen上加分。

＆＃13;

body {
  font-family: sans-serif;
}

.container {
  width: 100px;
}
.container a .image {
  position: relative;
  width: 100px;
  height: 100px;
  background-size: cover;
}
.container a .image:before {
  opacity: 0;
  content: '';
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  background-color: #ff6600;
  mix-blend-mode: multiply;
  -webkit-transition: opacity .25s ease;
  transition: opacity .25s ease;
}
.container a:hover .image:before {
  opacity: 1;
}
.container .caption {
  max-width: 100%;
  padding: 4px 0;
}

＆＃13;

<div class="container">
   <a href="yoursite">
      <div class="image" style="background-image:url(http://placekitten.com/g/300/300)"></div> 
   </a>
   <div class="caption">Text goes here.</div> 
</div>

＆＃13;

不要忘记投票，如果这有助于或远离主题并标记一个与绿色勾号一致的答案。

带链接和叠加悬停效果的图像

1 个答案: