隐藏（不透明度0）图像触发悬停链接（不需要）

Please see: https://codepen.io/alanvkarlik/pen/BYzYoY

请参阅：https：//codepen.io/alanvkarlik/pen/BYzYoY

<div class="hover_img">
<a class="hover_link" href="x">
Title
<span>
<img src="image.jpg" width="100%"/>
</span>
</a>
</div>

and css:

和css：

.hover_img span {
  z-index:-1;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}
.hover_img a:hover span {
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

basically if you go to my site, and hover below last link "Do Graphic Designers Need To Be Human?" the image will still show up because it's "hidden" underneath, moving mouse even lower triggers another image/link

基本上如果你去我的网站，并将鼠标悬停在最后一个链接下面“图形设计师需要成为人类吗？”图像仍将显示，因为它“隐藏”在下面，移动鼠标甚至更低会触发另一个图像/链接

I'm not sure if I can simplify the code somehow to make it work? All I want is for the image to show up when the mouse is hovering the link ONLY, not the area around it

我不确定我是否可以以某种方式简化代码以使其工作？我想要的只是当鼠标悬停在链接上时图像显示，而不是它周围的区域

2 个解决方案

#1

Adding just display: none to .hover_img span should helps a bit:

只添加display：none到.hover_img span应该有点帮助：

.hover_img span {
  display: none;
  z-index:-1;
  opacity: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 300ms ease-in-out;
  transition: opacity 400ms ease-in-out;
}

#2

I tried your code, I was able to do it but animation is gone now. Hopefully you will be able to resolve it.

我尝试了你的代码，我能够做到但动画现在已经消失了。希望你能够解决它。

/* PROJECTS LINKS + BACKGROUND */
.hover_link > span { display: none; }
}

.hover_link {
  transition: 0.3s;
  text-decoration: none;
  padding: 0 3px;
  background-color: #5544ee;
  color: #000;
  padding: 0px 3px;
  text-decoration: none;
  background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 73%,rgba(85,68,238,0) 74%,rgba(255,255,255,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 72%,rgba(85,68,238,0) 72%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(85,68,238,0) 20%,rgba(85,68,238,1) 21%,rgba(85,68,238,1) 73%,rgba(85,68,238,0) 74%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

#1