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

Question

我对html并不是超级棒，但我已经能够进入一些编码，到目前为止，这是我无法理解或解决的唯一问题。

我有一个大图像，但在图像下方是文本框，链接和其他图像。我可以将图像放到哪里，如果我将鼠标悬停在它上面，我可以完美地看到它下面的东西，但我不能滚动文本框，也不能点击我的链接。

我尝试将z-index设置为-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-index就可以正常工作