Javascript Fadein/out图像滚动，而不触发真实文本

我试图创建一个导航菜单，它在鼠标翻转时有图像淡入淡出背景，但上面有真实文本

我现在遇到的问题是，文本具有更高的z索引，当鼠标实际仍在按钮内时，该索引将禁用并重新激活滚动

HTML:

请自己试一试。我希望图像上的文本不起任何作用。

---

因此，您可以从左向右移动鼠标，而不是重新触发滚动，而是移动到文本上。

您需要在图像和文本的父容器上指定悬停效果。这样，当文本悬停时，父悬停将触发

#cf img.top {
  opacity: 1
}

#cf:hover img.top {
  opacity: 0
}

---

这里有一个解决方案，它不需要整个容器悬停，但需要移动一点标记才能使用（

+

选择器）：

#cf{
位置：相对位置；
高度：281px；
宽度：450px；
保证金：0自动；
}
#cf img{
位置：绝对位置；
左：0；
过渡：不透明度1s缓进缓出；
}
#cf#tekst:hover+img.top，#cf img.top:hover{
不透明度：0；
}
#特克斯特{
保证金：0自动；
字体大小：粗体；
字号：18px；
位置：绝对位置；
左：30px；
顶部：130像素；
z指数：3；
}

将鼠标移到文本上

从左到右缓慢移动

Hi Will，我该如何为一排按钮执行此操作？我想要8个，我是否也需要定义8乘以x#cf？或者我该怎么做？？

#cf {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}

#tekst {
    position: absolute;
    left: 35px;
    top: 111px;
    font-weight: bold;
    font-size: 18px;
    z-index: 99;
 } 

#cf img.top {
  opacity: 1
}

#cf:hover img.top {
  opacity: 0
}