html - 将链接添加到图像会破坏其他所有功能(Adding link to a image breaks everything else)

Question

So this is a simple line of images, with hover effects, I have it doing everything I need, except when I add a link to open up a new page enter image description here so do i need to remake everything and use a different approach or is there a way to somehow fix the issue?

(因此，这是一条简单的图像行，具有悬停效果，可以完成我需要做的所有事情，除非添加链接以打开新页面时在此处输入图像描述，所以我需要重新制作所有内容并使用其他方法或有办法解决该问题吗？)

Thanks :)

(谢谢 ：）)

UPDATE!

(更新！)

The code might not be perfect, but I added

(该代码可能并不完美，但是我添加了)

.box-1 a { display:contents: }

(.box-1 a {display：contents：})

and that solved everything !

(那解决了一切！)

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

  ask by Normunds Ratnieks translate from so

Answer 1

I think you are accidentally making <a> position: absolute .

(我认为您不小心将<a> position: absolute <a> position: absolute 。)

Instead of using :not , why not target the h2 directly .box-1 h2 and also try giving it a width and height

(而不是使用:not ，为什么不直接将h2 .box-1 h2目标.box-1 h2并尝试为其指定宽度和高度)