在没有真实文本触发的情况下淡入/淡出图像翻转答案

【问题标题】：Fadein/out image rollover without the real text triggering it在没有真实文本触发的情况下淡入/淡出图像翻转
【发布时间】：2016-01-08 06:18:30
【问题描述】：

我正在尝试创建一个导航菜单，该菜单在鼠标悬停时具有图像淡入/淡出背景，但上面有真实的文本。

我现在遇到的问题是文本具有更高的 z-index，当鼠标实际上仍在按钮内时，它会禁用和重新激活翻转。

https://jsfiddle.net/technov1king/1an1joxq/6/

HTML：

<div id="cf">
    <img class="bottom" src="http://dummyimage.com/300.png/09f/fff" />
    <img class="top" src="http://sciencenordic.com/sites/default/files/imagecache/300x/hopp_None_0.jpg" />
    <div id="tekst">MOVE MOUSE OVER TEXT<br>SLOW LEFT TO RIGHT</div>
</div>

CSS：

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

请自行尝试。我希望图像上的文本什么都不做。所以你从左到右移动鼠标，不是重新触发翻转，而是在文本上移动。

【问题讨论】：

标签： javascript css z-index

【解决方案1】：

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

#cf img.top {
  opacity: 1
}

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

【讨论】：

嗨，威尔，我将如何为一排按钮执行此操作？我想要其中的 8 个，我是否也需要定义 8 次 x #cf？或者我该怎么做？？

【解决方案2】：

这是一个不需要整个容器悬停的解决方案，但需要移动一些标记才能使用adjacent sibling selector（+ 选择器）：

#cf {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf img {
    position:absolute;
    left:0;
    transition: opacity 1s ease-in-out;
}
#cf #tekst:hover + img.top, #cf img.top:hover {
    opacity:0;
}
#tekst {
    margin: 0 auto;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    left: 30px;
    top: 130px;
    z-index: 3;
}

<div id="cf">
    <img class="bottom" src="http://dummyimage.com/300.png/09f/fff" />
    <div id="tekst">MOVE MOUSE OVER TEXT
    <br>SLOW LEFT TO RIGHT</div>
    <img class="top" src="http://sciencenordic.com/sites/default/files/imagecache/300x/hopp_None_0.jpg" />
</div>

【讨论】：