将元素悬停在元素上时,我试图更改它的宽度。它似乎可以工作,但是只要我将鼠标停留在元素上,它就会一直过渡,从而导致类似毛刺的循环。我怎样才能使过渡只发生一次?
谢谢。
html:
<div>
<div>
<img id="img" src="#"/>
</div>
</div>
css:
#img {
width: 326px;
height: 326px;
-webkit-transition: width 0.4s, height 0.4s;
transition: width 0.4s, height 0.4s;
}
#img:hover {
width: 0px;
height: 326px;
}
答案 0 :(得分:1)
对此进行了一段时间的修改后,我意识到,随着图像变小到width: 0
,您的光标最终将离开图像,导致悬停状态不再有效。这会使图像返回全宽,直到再次击中光标并使其变小为止。这将无限进行。
假设您的图片停留在326px
,我对其进行了一些编辑以使父级具有相同的大小,并且在父级悬停时,它将使子级变小。这将使悬停区域保持相同大小,从而不会引起毛刺。