[英]Fadein/out image rollover without the real text triggering it
我正在嘗試創建一個導航菜單,該菜單在鼠標懸停時具有圖像淡入/淡出背景,但最上方是真實文本。
我現在遇到的問題是,文本具有較高的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;
}
請自己嘗試。 我希望圖像上的文字不執行任何操作。 因此,您將鼠標從左向右移動,而不是重新觸發過渡,而是在文本上移動。
您需要在圖像和文本的父容器上指定懸停效果。 這樣,當文本懸停時,父懸停會觸發。
#cf img.top {
opacity: 1
}
#cf:hover img.top {
opacity: 0
}
這是一個不需要整個容器都懸停的解決方案,但是為了使用相鄰的同級選擇器 ( +
選擇器),確實需要四處移動標記:
#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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.