我正在设置一个简单的动画,当您将鼠标悬停在图像上时,会显示一些附加信息。 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,.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>
解决方法
原文地址:https://www.jb51.cc/css/218360.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。