转换 CSS3 不起作用
Transition CSS3 does not work
我正在尝试 w3schools 中的示例:http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 但我在我的 CSS 中做了同样的事情,但它不起作用。
CSS:
nav > ul > li{
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
}
nav > ul > li:hover{
width: 20%;
}
悬停没有问题,但过渡没有...这应该很容易
如果没有起始值和结束值,浏览器通常无法转换元素的 属性。给它一个初始宽度。
nav > ul > li {
width: 100px;
您会注意到,如果您从 the example you gave 中删除初始宽度,过渡将停止运行。
在应用transition
之前,您需要定义元素的initial/start width
nav > ul > li {
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
background: #f00;
width: 0; /* Add this */
}
nav > ul > li:hover {
width: 20%;
}
一些小技巧 :
- 如果值为
0
,则不要使用 px
,因此单位无关紧要。
- 我希望你知道你正在使用
inline-block
所以 white-space 会发生
- 如果不需要,不要使用太具体的选择器,将
class
分配给 parent 元素以唯一标识该元素。所以不用写 nav > ul > li
你可以写 .some-class-nav > li
。如果您确定您的 li
项目不会有 child li
,您也可以摆脱 >
我正在尝试 w3schools 中的示例:http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1 但我在我的 CSS 中做了同样的事情,但它不起作用。
CSS:
nav > ul > li{
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
}
nav > ul > li:hover{
width: 20%;
}
悬停没有问题,但过渡没有...这应该很容易
如果没有起始值和结束值,浏览器通常无法转换元素的 属性。给它一个初始宽度。
nav > ul > li {
width: 100px;
您会注意到,如果您从 the example you gave 中删除初始宽度,过渡将停止运行。
在应用transition
width
nav > ul > li {
display: inline-block;
padding: 0px;
margin: 0px;
transition: width 2s;
background: #f00;
width: 0; /* Add this */
}
nav > ul > li:hover {
width: 20%;
}
一些小技巧 :
- 如果值为
0
,则不要使用px
,因此单位无关紧要。 - 我希望你知道你正在使用
inline-block
所以 white-space 会发生 - 如果不需要,不要使用太具体的选择器,将
class
分配给 parent 元素以唯一标识该元素。所以不用写你可以写nav > ul > li
.some-class-nav > li
。如果您确定您的li
项目不会有 childli
,您也可以摆脱
>