悬停动画不会消失，当不徘徊

我有一个div我动画悬停。然而，当我不徘徊在div不会消失悬停动画不会消失，当不徘徊

这就是整个事情看起来像在行动：http://jsfiddle.net/Vbxtc/

这是HTML：

<nav> 
     <div id="controls"> 
      <button id="playButton">Play</button>  
      <div id="defaultBar"> 
       <div id="progressBar"></div> 
      </div> 
      <button id="vol" onclick="level()">Vol</button> 
      <button id="mute">Mute</button> 
      <button id="full" onclick="toggleFullScreen()">Full</button> 
     </div> 
     <div id="playlist" class="animated fadeInRight"> 
      <div>cats</div> 
      <div>cats</div> 
      <div>cats</div> 
     </div> 
    </nav>

这是CSS我” VE发：

#playlist{ 
    position:absolute; 
    display:block; 
    border:1px solid red; 
    height: 82%; 
    width: 25%; 
    top: 20px; 
    right: 0px; 
    z-index: 2; 
    float:right; 
    padding: 0px; 
    margin: 0px; 
    color:white; 
    background-color:#999999; 
    opacity: 0; 
} 
#playlist:hover { 
    opacity: 1; 
}

这是动画即时试图

.animated:hover { 
    -webkit-animation-fill-mode: both; 
    -moz-animation-fill-mode: both; 
    -ms-animation-fill-mode: both; 
    -o-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-duration: 1s; 
    -moz-animation-duration: 1s; 
    -ms-animation-duration: 1s; 
    -o-animation-duration: 1s; 
    animation-duration: 1s; 
} 

.fadeInRight { 
    -webkit-animation-name: fadeInRight; 
    -moz-animation-name: fadeInRight; 
    -o-animation-name: fadeInRight; 
    animation-name: fadeInRight; 
} 
@-webkit-keyframes fadeOutRight { 
    0% { 
     opacity: 1; 
     -webkit-transform: translateX(0); 
    } 

    100% { 
     opacity: 0; 
     -webkit-transform: translateX(20px); 
    } 
} 
@-webkit-keyframes fadeInRight { 
    0% { 
     opacity: 0; 
     -webkit-transform: translateX(20px); 
    } 

    100% { 
     opacity: 1; 
     -webkit-transform: translateX(0); 
    } 
}

来源

2013-02-10 Batman

徘徊在哪个项目它不会消失？它是否在左边的空白处徘徊？ – 2013-02-10 04:37:38

是的，当我走到白色空间的左侧。该div将生成动画，不透明度将变为1.如果我让动画完成，则将鼠标移动到该区域外。该div不离开（不透明度0） – Batman 2013-02-10 04:41:33

如果你指的是所有的divs，如“猫猫”和“播放vol mut full”，那么当鼠标移出时我发现它会消失。你正在使用哪种浏览器？ – 2013-02-10 04:45:25

我注意到，当你将鼠标放在正确的位置上时（鼠标悬停约1秒并将鼠标移到顶部），它会很好地淡出。

另一件事是，如果添加类fadeOutRight如下：

<div id="playlist" class="animated fadeInRight fadeOutRight">

太快淡出。

我知道我没有多大帮助，但答案在于时机。

此外，如果您有fadeOutRight类，例如侧边栏，它可以很好地工作！

<aside id="sidebar" class="fadeOutRight">

也许，把fadeOutRight的类放在除了fadeInRight div之外的所有东西上。

来源

2013-02-10 04:23:20

不过，如果鼠标悬停时间过长，div仍然存在。答案与时间有关。希望这有助于某种方式！ – 2013-02-10 04:30:37

玩悬浮状态下的元素位置不是一个好主意。即使你编程正确（这并不容易），大部分时间用户都不会理解发生了什么。

在没有用户移动光标的情况下，您的div离开光标位置，取消悬停，div重新进入光标，悬停触发等等，您可以获得闪烁的情景。

我会推荐在另一个div上触发悬停，以覆盖移动div所在的整个区域。

来源

2013-02-11 17:30:17 vals

我最终找出了问题。它工作得很好，但我缺少一些东西来向用户表明这个区域包含播放列表，但不确定是什么。看到这里：http://www3.carleton.ca/clubs/sissa/html5/video.html – Batman 2013-02-11 18:00:00

悬停动画不会消失，当不徘徊

回答

相关问题