淡入/淡出图像翻转而无需真实文本触发

Question

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

我现在遇到的问题是，文本具有较高的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;
 } 

请自己尝试。 我希望图像上的文字不执行任何操作。 因此，您将鼠标从左向右移动，而不是重新触发过渡，而是在文本上移动。

Answer 1

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

#cf img.top {
  opacity: 1
}

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

Answer 2

这是一个不需要整个容器都悬停的解决方案，但是为了使用相邻的同级选择器 （ +选择器），确实需要四处移动标记：

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