html - CSS3 动画仅适用于第一次悬停

Question

我正在建立一个网站，我正在尝试为一个 div 的 :hover 设置动画，这样当鼠标悬停在它上面时，另一个 div 当前位于 opacity:0 将在 3.5 秒的时间内将其不透明度增加到 0.8，同时淡入到位。

这将正常工作，直到我第二次尝试它，然后当我用鼠标离开对象时它不会淡化回 0 不透明度。该对象将以不透明度 0.8 保持可见。

希望我说得有道理。

淡入淡出动画是从 Animate.css 中提取并直接插入到我的 css 中。

我所有关于这个问题的代码都可以在这里找到

.widget-Button4.widget-header.widget-html-widget.widget p
{
  background:none;
  height: 50px;
  position: absolute;
  top: 250px;
  left: 1000px;
}

#Hosting
{
  background-image: url("images/header_rollout_expandedbg.png");
  background-size:100%;
  background-repeat:no-repeat;
  margin: 0 0 1em;
  font-size: 11px;
  line-height: 1.538em;
  float: left;
  padding: 20px 14px 14px 14px;
  position: absolute;
  top: 274px;
  left: 909px;
  z-index: 0;
  -webkit-animation:fadeOutUp 3.5s; /* Chrome, Safari, Opera */
  animation:fadeOutUp 3.5s;
  -webkit-transition: opacity 3.5s ease-in-out;
  -moz-transition: opactiy 3.5s ease-in-out;
  -ms-transition: opacity 3.5s ease-in-out;
  -o-transition: opacity 3.5s ease-in-out;
  transition: opacity 3.5s ease-in-out;
  filter: alpha(opacity=0);
  opacity: 0;
}

#HostingButton
{
  background-image: url("images/header_rolloutbg_static_complete.png");
  background-size:100%;
  background-repeat:no-repeat;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 263px;
  left: 1007px;
  -webkit-transition: all 3.5s ease-in-out;
  -moz-transition: all 3.5s ease-in-out; 
  -o-transition: all 3.5s ease-in-out; 
  -ms-transition: all 3.5s ease-in-out;
  z-index: 50;
}

#HostingButton:hover
{
  -webkit-transform: rotate(1080deg); 
  -moz-transform: rotate(1080deg); 
  -o-transform: rotate(1080deg);
  -ms-transform: rotate(1080deg);
}

#HostingButton:hover + #Hosting
{
  -webkit-animation:fadeInDown 3.5s; /* Chrome, Safari, Opera */
  animation:fadeInDown 3.5s;
  transition: none;
  -o-transition: none;
  -ms-transition: none;
  -moz-transition: none;
  -webkit-transition: none;
  filter: alpha(opacity=80);
  opacity: 0.8;
}

@-webkit-keyframes fadeInDown
{
    0%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
100%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}

@keyframes fadeInDown
{
0%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
100%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
}

@-webkit-keyframes fadeOutUp
{
0%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
}
100%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
}

}

@keyframes fadeOutUp
{
0%
{
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}
100%
{
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}
}

这里还有 HTML 代码

<p>
    Hosting
</p>
<div id="HostingButton">
</div>
<div id="Hosting">
    <div id="rollouttext">
        Hello
    </div>
</div>

我设法得到了它的不透明度部分，我在 JSFiddle 中工作时遇到了麻烦。 http://jsfiddle.net/7uR8z/1499/

虽然我使用的是相同的代码，但我想我可能会遇到一些冲突，而且我正费尽心机地想办法解决这个问题。

如有任何帮助，我们将不胜感激!

Answer 1

你是如何描述它的，那里有 2 个 div。第一个 div 是可见的，第二个 div 是 0 不透明度。当您悬停时，第一个 div 的不透明度为 0，第二个 div 的不透明度为 80%。这发生在 3.5 秒内。

我在不同的 div .item 和 .description 中创建了 2 个状态。不太确定为什么要放大那里？如果这不是您想要做的，请告诉我。

.container {
    height:200px;
    width:200px;
    position:relative;
}
.item {
    height:200px;
    width:200px;
    position:absolute;
    background:red;
    -webkit-transition: opacity 3.5s ease-in;
    -moz-transition: opactiy 3.5s ease-in;
    -ms-transition: opacity 3.5s ease-in;
    -o-transition: opacity 3.5s ease-in;
    transition: opacity 3.5s ease-in;
    filter: alpha(opacity=100);
    opacity: 1;
}
.item:hover {
    filter: alpha(opacity=0);
    opacity: 0;
}
.descriton {
    position:absolute;
    height:200px;
    width:200px;
    background:green;
    display:visible;
    -webkit-transition: opacity 3.5s ease-in;
    -moz-transition: opactiy 3.5s ease-in;
    -ms-transition: opacity 3.5s ease-in;
    -o-transition: opacity 3.5s ease-in;
    transition: opacity 3.5s ease-in;
    filter: alpha(opacity=0);
    opacity: 0;
}
.descriton:hover {
    filter: alpha(opacity=80);
    opacity: 0.8;
}

查看演示 jsfiddle