Fadein/out图像翻转没有真正的文本触发它

我想创建一个导航菜单，它具有图像淡入/淡出背景onmouseover翻转，但与真实的文字在它上面。Fadein/out图像翻转没有真正的文本触发它

我现在遇到的麻烦是文本具有更高的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; 
}

请您尝试一下你的自我。我希望图片上的文字不做任何事情。因此，您将鼠标从左向右移动，不会重新触发翻滚，而是在文本上移动。

来源

2015-10-13 dennis

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

#cf img.top { 
    opacity: 1 
} 

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

来源

2015-10-13 15:22:09 TbWill4321

https://jsfiddle.net/1an1joxq/7/ –

嗨请问，我会如何做一排按钮？我想要8个，我是否也需要定义8次x #cf？或者我会怎么做？ – dennis

这里有一个解决方案，不需要整个容器徘徊，但需要一点标记，以便使用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>

来源

2015-10-13 15:23:02 TylerH

Fadein/out图像翻转没有真正的文本触发它

回答

相关问题