我正在推文(以及 Facebook 点赞)按钮之上制作一个 div
。我希望它在我将鼠标悬停在 div
(按钮)上方时立即向上移动,以便您实际上可以按下真正的 tweet 按钮。我尝试了以下方法。
HTML:
<div class="tweet-bttn">Tweet</div>
<div class="tweet-widget">
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
CSS:
.tweet-bttn{
position: relative;
top: -30px;
left: -10px;
display:block;
opacity: 1;
width: 80px;
padding: 10px 12px;
margin:0px;
z-index:3;}
.tweet-bttn:hover{
-webkit-animation-name: UpTweet;
-moz-animation-name: UpTweet;
-o-animation-name: UpTweet;
animation-name: UpTweet;
-webkit-animation-duration:.5s;
-moz-animation-duration:.5s;
animation-duration:.5s;
-webkit-transition: -webkit-transform 200ms ease-in-out;
-moz-transition: -moz-transform 200ms ease-in-out;
-o-transition: -o-transform 200ms ease-in-out;
transition: transform 200ms ease-in-out;}
@-webkit-keyframes UpTweet {
0% {
-webkit-transform: translateY(0);
}
80% {
-webkit-transform: translateY(-55px);
}
90% {
-webkit-transform: translateY(-47px);
}
100% {
-webkit-transform: translateY(-50px);
}
... and all other browser pre-fixes.
}
我不确定出了什么问题。看起来我一悬停它,它就移动了,但如果我将光标再移动一个像素,它就必须进行新的计算,这会导致闪烁。
最佳答案
当您可以使用 transitions
简单地实现上述目标时,我不知道为什么需要动画
诀窍是在父悬停时移动子元素
div {
margin: 100px;
position: relative;
border: 1px solid #aaa;
height: 30px;
}
div span {
position: absolute;
left: 0;
width: 100px;
background: #fff;
top: 0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
div span:nth-of-type(1) {
/* Just to be sure the element stays above the
content to be revealed */
z-index: 1;
}
div:hover span:nth-of-type(1) { /* Move span on parent hover */
top: -40px;
}
说明:首先我们包装span
在 div
里面元素 position: relative;
然后我们使用 transition
在 span
这将帮助我们顺利处理 animation
的流程, 现在我们使用 position: absolute;
与 left: 0;
, 这会将元素堆叠在一起,而不是我们使用 z-index
确保第一个元素覆盖第二个元素。
最后,我们移动第一个 span
,我们通过使用 nth-of-type(1)
选择它, 这只不过是嵌套在 div
中的第一个子类, 我们分配 top: -40px;
当 parent div
悬停。
关于html - 在悬停时使用 CSS 变换时闪烁的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18845136/