Question

请参阅：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>

和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;
}

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

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

Answer 1

仅向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;
}

Answer 2

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

/* 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 */
}

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

2 个答案: