CSS pseudo class for leaving hover

萝らか妹 提交于 2021-02-07 06:53:15

问题


I have a nice little hover effect on my website that quickly transitions in as the user hovers over a link. But when the user leaves hovering over the box, the shadow (and other traits) go away immediately, instead of fading back out. Is there a way I can get the properties to fade both in AND out, maybe using some sort of :un-hover type pseudo class? Thanks! And here is the CSS block if it helps:

a.squares:hover, a.squares:active {
    color: black;
    background-color: #E8E8E8;
    box-shadow: 0 0 12px black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

回答1:


Put the transitions on a.squares not a.squares:hover

a.squares {
    -webkit-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    -moz-transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
    transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
a.squares:hover, a.squares:active {
    color: black;
    background-color: #E8E8E8;
    box-shadow: 0 0 12px black;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

I went through this exact thing when I was just leaving about transitions :)



来源:https://stackoverflow.com/questions/15194293/css-pseudo-class-for-leaving-hover

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!