html – 在悬停时使用CSS转换时闪烁的div

概述我在推文(以及Facebook之类)按钮上做了一个div.我希望它一旦我悬停在div(按钮)上方就会向上移动,这样你就可以按下真实的推文按钮了.我尝试了以下内容. HTML： <div class="tweet-bttn">Tweet</div> <div class="tweet-widget"> <a href="https://twitter.com/share" 我在推文(以及Facebook之类)按钮上做了一个div.我希望它一旦我悬停在div(按钮)上方就会向上移动,这样你就可以按下真实的推文按钮了.我尝试了以下内容.

HTML：

<div >Tweet</div>         <div >    <a href="https://twitter.com/share" >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.}

我不确定出了什么问题.看起来,只要我悬停,它就会移动,但是如果我再移动光标一个像素,它就必须进行新的计算,这会导致闪烁.

解决方法 我不知道为什么你需要动画才能实现上述使用过渡

诀窍是在父级悬停上移动子元素

Demo

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;
 然后我们使用跨度上的过渡来帮助我们平滑动画的流动,现在我们使用position：absolute;使用left：0;,这将相互堆叠元素,而不是使用z-index来确保第一个元素覆盖第二个元素.

最后,我们移动第一个span,我们通过使用nth-of-type(1)来选择它,它只是嵌套在div中的第一个子类,我们分配顶部：-40px;当父div悬停时,它将转移.

总结

以上是内存溢出为你收集整理的html – 在悬停时使用CSS转换时闪烁的div全部内容，希望文章能够帮你解决html – 在悬停时使用CSS转换时闪烁的div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。