我正在设置一种简单的动画,当您将鼠标悬停在图像上时,它会显示一些附加信息。jQuery后备部分已编写并正常工作,但我遇到的问题是在用户悬停时使CSS3动画反向运行。
因此,当您悬停时,它很好地工作,但是一旦您悬停在其他位置,元素就会消失。我想知道的是是否有一种方法可以让它们在鼠标悬停在其他位置时向后动画。非常感谢!
#recent-work div { position: relative; width: 300px; height: 168px; overflow: hidden; }
#recent-work div:hover .recent-project-type {
animation-name: showType;
animation-duration: .5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
-moz-animation-name: showType;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease;
-moz-animation-delay: 0;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-play-state: running;
-webkit-animation-name: showType;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
top: 0;
}
#recent-work div:hover .recent-project-title {
animation-name: showTitle;
animation-duration: .5s;
animation-timing-function: ease;
animation-delay: 0;
animation-iteration-count: 1;
animation-direction: normal;
animation-play-state: running;
-moz-animation-name: showTitle;
-moz-animation-duration: .5s;
-moz-animation-timing-function: ease;
-moz-animation-delay: 0;
-moz-animation-iteration-count: 1;
-moz-animation-direction: normal;
-moz-animation-play-state: running;
-webkit-animation-name: showTitle;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease;
-webkit-animation-delay: 0;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-play-state: running;
bottom: 0;
}
.recent-project-title { position: absolute; left: 0; right: 0; bottom: -34px; padding: 8px 10px; background: rgba(0,0,0,.75); text-decoration: none; border: 0; font-size: 20px; font-weight: 400; color: #fff; }
.recent-project-title:hover { color: #ff9900; text-decoration: none; }
.recent-project-type { position: absolute; left: 0; top: -26px; padding: 4px 8px; font-size: 12px; font-weight: 600; background: #ff9900; text-transform: uppercase; color: #111; }
.recent-project-type:hover { color: #fff; text-decoration: none; }
@keyframes showType {
from { top: -26px; }
to { top: 0; }
}
@-moz-keyframes showType {
from { top: -26px; }
to { top: 0; }
}
@-webkit-keyframes showType {
from { top: -26px; }
to { top: 0; }
}
@keyframes showTitle {
from { bottom: -34px; }
to { bottom: 0; }
}
@-moz-keyframes showTitle {
from { bottom: -34px; }
to { bottom: 0; }
}
@-webkit-keyframes showTitle {
from { bottom: -34px; }
to { bottom: 0; }
}
<div class="row" id="recent-work">
<div class="span-one-third">
<a href="#" class="recent-project-image"><img src="http://dl.dropbox.com/u/1762184/recent-work01.png" width="300" height="168"></a>
<a href="#" class="recent-project-title">Philly</a>
<a href="#" class="recent-project-type">Video</a>
</div>
</div>