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轻松放在不同的标签中，因为这是我在其他人看到的建议，但它似乎只是想要在那里工作。如果在另一个空间，它根本没有动画

我不确定从哪里开始，任何帮助都将不胜感激

Answer 1

你的问题似乎很简单但不是真的。彻底扫描它让我知道你是以非常错误的方式做到的。你的pop在离开鼠标后立即消失的原因不是因为它的不透明度没有动画/过渡，因为它的位置跳出视图（你也设置了overflow:hidden为容器）。另一个问题是，popup最初的背景为transparent，不透明度为0，仅在离开鼠标后，不透明度会动画，但背景会切换回来（从green）到{{ 1}}立即，这就是为什么它没有任何向后过渡就消失了。

要解决此问题，您应该在元素的正常状态下设置所有属性，在悬停状态下，您只需要更改要设置动画/应用转换的属性（即transparent属性），这是固定代码：

opacity

Updated Demo

Answer 2

您的CSS规则存在问题：当鼠标悬停在popup上时，您将位置，高度，宽度，显示等分配给pop和#container ，但是当鼠标位于#container之上时，您唯一想要改变的是不透明度。因此，当鼠标离开容器时，popup和pop正在移动，因为它们的位置正在发生变化，您无法看到过渡。

要解决此问题，当鼠标悬停在popup上时，您需要将所有属性但不透明度分配给pop和#container：

#container popup { position:absolute; top:0; height:25%; width:100%; background-color:#00ff00; display:block;  padding:30px 0px 0px 0px; }
#container pop { position:absolute; top:0; height:25%; width:100%;  display:block; padding:30px 0px 0px 0px; }
#container:hover popup { opacity: 0.6; }
#container:hover pop {opacity: 1; }

在此处查看此行动：http://jsbin.com/wacorevi/1/edit

顺便说一句，为什么使用popup和pop代码而不是标准HTML代码？

CSS div过渡;在鼠标悬停时，但不是在鼠标移出？

2 个答案:

Updated Demo