CSS div 过渡；在鼠标悬停时，而不是在鼠标移开时？

Question

我正在尝试制作一个图像，该图像的 div 在鼠标悬停时淡入，但随着鼠标移开而再次淡出。我希望 div 占图像的大约 50% 并在其中包含一些文本

我已经设法解决了淡入问题，但是鼠标一离开，它就没有优雅地淡出，它只是消失了......

这是我当前的代码:

CSS

body { font-family: 'Jolly Lodger', cursive; width:800px; height:600px; margin:0px; padding:0px; }
#container { width:50%; height:100%; background-color:#0000ff; margin:0px; padding:0px; position:relative; text-align: center; overflow: hidden; }
popup { opacity:0; -webkit-transition: opacity 4s ease-out; }
popup:hover { opacity:0.6; }
pop { opacity:0; -webkit-transition: opacity 4s ease-out; }
pop:hover { opacity:1; }
#picture { max-height:100%; margin-left: -100%; } 
#container:hover popup { position:absolute; top:0; height:25%; width:100%; background-color:#00ff00; display:block; opacity: 0.6; padding:30px 0px 0px 0px; }
#container:hover pop { position:absolute; top:0; height:25%; width:100%; opacity: 1; display:block; padding:30px 0px 0px 0px; }

HTML

<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/commons/d/db/Caneel_Bay_Free_Roaming_Wild_Donkeys.jpg" id="picture" />
<popup>&nbsp</popup>
<pop><p><font size="7">I fade!</font></p> <p>Fade in!</p></pop>
</div>

JSFiddle 在行动:http://jsfiddle.net/jmKFv/

我试图将 -webkit-transition: opacity 4s ease-out 放在不同的标签中，因为这是我在这里看到的其他人的建议，但它似乎只想在那里工作。如果在另一个空间中，它根本没有动画

我不确定从这里去哪里，任何帮助将不胜感激

Answer 1

你的问题看似简单，其实不然。彻底扫描它让我知道你做的方式非常错误。您的 pop 在离开鼠标后立即消失的原因不是因为它的不透明度没有动画/转换，而是因为它的位置跳出 View (并且您还设置了 overflow:hidden 用于容器)。另一个问题是你的 popup 最初有 transparent 的背景和 0 的不透明度，在离开鼠标后只有不透明度是动画但背景切换回来(从 green) 立即变为transparent，这就是它在没有任何向后转换的情况下消失的原因。

要解决此问题，您应该在元素的正常状态下设置所有属性，在悬停状态下，您只需要更改要设置动画/应用过渡的属性(即 opacity 属性)，这里是固定代码:

popup {  opacity:0; height:25%; width:100%; 
         background-color:#00ff00; 
         position:absolute; left:0; top:0;
         display:block; padding:30px 0px 0px 0px; z-index:1;
         -webkit-transition: opacity 4s ease-out; 
}
popup:hover { opacity:0.6; }
pop { opacity:0; height:25%; width:100%;
      position:absolute; left:0; top:0;
      display:block; padding:30px 0px 0px 0px;
      -webkit-transition: opacity 4s; }
pop:hover { opacity:1; }
#picture { max-height:100%; margin-left: -100%; } 
#container:hover popup { opacity: 0.6; } /* change only the opacity here */
#container:hover pop { opacity: 1; }    /* change only the opacity here */

Updated Demo