作者:每天还贷的飞鱼 | 来源:互联网 | 2023-05-19 06:59
已经检查了大量的答案,但找不到我需要的答案.我想这是因为我找不到正确的话来说出来!
我有一个设置为高度为80px的textarea,当你将鼠标悬停在它上面时,会有一个平滑的webkit
动画,它会扩展到310px.这个位工作正常,只是当你将鼠标从文本区域移开时,它会立即回到80px,这时最好再次平滑地压缩它.
我如何修改此代码以使其成功?
textarea
{
width: 1100px;
height: 80px;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
border-color: #000000;
background-color : #000000;
color: #FFFFFF;
opacity: 0.7;
font-family: "Times New Roman";
vertical-align: middle;
}
textarea:hover
{
font-weight: bold;
font-size: 31px;
border-radius: 10px;
opacity: 1;
width: 1100px;
height: 310px;
-webkit-transition: height 1s;
}
PoeHaH..
7
只需将过渡线放在textarea
自身上,如下所示:
textarea
{
width: 1100px;
height: 80px;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
border-color: #000000;
background-color : #000000;
color: #FFFFFF;
opacity: 0.7;
font-family: "Times New Roman";
vertical-align: middle;
-webkit-transition: height 1s;
}
textarea:hover
{
font-weight: bold;
font-size: 31px;
border-radius: 10px;
opacity: 1;
width: 1100px;
height: 310px;
}
这可以确保所有高度变化(包括鼠标移出)都作为动画应用于textarea,而不仅仅是悬停.
DEMO
http://jsfiddle.net/qd4fdfnd/
1> PoeHaH..:
只需将过渡线放在textarea
自身上,如下所示:
textarea
{
width: 1100px;
height: 80px;
font-weight: bold;
font-size: 20px;
border-radius: 10px;
border-color: #000000;
background-color : #000000;
color: #FFFFFF;
opacity: 0.7;
font-family: "Times New Roman";
vertical-align: middle;
-webkit-transition: height 1s;
}
textarea:hover
{
font-weight: bold;
font-size: 31px;
border-radius: 10px;
opacity: 1;
width: 1100px;
height: 310px;
}
这可以确保所有高度变化(包括鼠标移出)都作为动画应用于textarea,而不仅仅是悬停.
DEMO
http://jsfiddle.net/qd4fdfnd/