出于某种原因,当我将鼠标悬停在div上时,边框会正常设置动画,但是鼠标悬停它不会产生任何过渡。我错过了什么?
http://codepen.io/anon/pen/XbPbvr
HTML:
<div class="test">
Test
</div>
LESS:
.test {
background: #eee;
border-bottom: none;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}
答案 0 :(得分:5)
如果您真的不想要边框,可以将颜色设置为透明,长度为0:
.test {
background: #eee;
border-bottom: 0px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
}
.test:hover {
border-bottom: 5px solid black;
}
&#13;
<div class="test">
Test
</div>
&#13;
答案 1 :(得分:3)
你无法动画到border-bottom:none,将其更改为border-bottom:RGBA(0,0,0,0)(或者可能是border-bottom:透明,如果可行)。
你也不需要&#34;过渡:边界100毫秒的缓解&#34;在悬停范围内。
答案 2 :(得分:1)
边境不能是none
。试试这个:
.test {
background: #eee;
border-bottom: 5px solid transparent;
width: 300px;
height: 300px;
transition: border 100ms ease-out;
&:hover {
border-bottom: 5px solid black;
transition: border 100ms ease-out;
}
}