当我将鼠标悬停在图像上并使用z-index属性时，图像会闪烁吗？

Question

我对html并不是特别在行，但我已经能够用自己的方式编写代码，到目前为止，这是我唯一不能理解也不能解决的问题。

我有一张很大的图片，但图片下面是文本框、链接和其他图片。如果我将鼠标悬停在图片上，我可以看到图片下面的内容，但是我不能滚动文本框，也不能点击我的链接。

我尝试将z- works...if设置为-9，但是我保持鼠标不动。(毫无意义。)如果我移动鼠标，图像就会随着移动而闪烁。有什么修复方法吗？Here is the issue.，我为混乱的代码道歉。

 #aesth {
 position:fixed;
 top:150px;
 left:90px;
 width:432px;
 height:600px;
 background: url('https://38.media.tumblr.com/5f5348ef9ed5ca32ffb42a153032b6d3/tumblr_n83taak4Bj1tvcp5qo1_500.png'), #fff;
 z-index:9;
 }

 #aesth:hover {

z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

Answer 1

问题是，当你悬停图像时，它会褪色并消失。当它被放在后面时，它会返回到初始状态，因为这次它不是悬停在上面，而是其他内容。尝试在悬停时定位父对象，然后将效果应用于图像。这样，悬停效果仍然存在，因为目标不会从鼠标指针移开。

parent:hover > #aesth{

z-index:-9;
opacity: 0;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}

Answer 2

中给出的z-index=-9导致了悬停问题

#aesth:hover {
  z-index:-9;
  opacity: 0;
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

只需删除#aesth:hover中的z索引，它就可以正常工作

​

​