时间戳

首页 > 解决方案 > 将链接添加到图像会破坏其他所有内容

html - 将链接添加到图像会破坏其他所有内容

问题描述

所以这是一个简单的图像行，带有悬停效果，我可以做我需要的一切，除非我添加一个链接来打开一个新页面 在此处输入图像描述 ，所以我需要重新制作所有内容并使用不同的方法或者有没有办法以某种方式解决问题？谢谢 ：）

更新！

代码可能并不完美，但我添加了

.box-1 a { 显示：内容：}

这解决了一切！

.container-1 {
  display: inline-flex;
}

.box-1 {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 30px;
  text-align: center;
  display: inline-block;
  position: relative;
}

.box-1:hover img {
  filter: blur(3px) brightness(85%);
}

.box-1 img {
  width: 100%;
  height: 100%;
  transition: 0.1s;
}

.box-1 :not(img) {
  position: absolute;
  top: 30%;
  z-index: 1;
  color: #fff;
  text-align: center;
  width: 90%;
  opacity: 0;
  transition: 0.1s;
  letter-spacing: 2px;
}

.box-1 h2 {
  top: 50%;
}

.box-1:hover :not(img) {
  opacity: 1;
}
<div class="container-1">
  <div class="box-1">
    <a href="c1.html" target="_blank">
      <img class="candle-image" src="image/candlesp/IMG_0900.jpg"/></a>
    <h2>Festivity</h2>
  </div>
  <div class="box-1">
    <img src="image/candlesp/IMG_0903.jpg" alt="">
    <h2>Cinnamon</h2>
  </div>
  <div class="box-1">
    <img src="image/candlesp/IMG_0917.jpg" alt="">
    <h2>Forest</h2>
  </div>
</div>

标签： htmlcss

解决方案

我想你是不小心弄的<a> position: absolute。而不是使用:not，为什么不h2直接定位.box-1 h2并尝试给它一个宽度和高度

推荐阅读