以下是我正在使用的HTML和CSS。不幸的是,已经询问的问题没有给出所需的答案。基本上它会减小所有兄弟元素的宽度,并增加鼠标悬停在上面的元素的宽度。我使用了“ease-in-out”,但转换的“OUT”部分会立即跳回到其原始状态。
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding: 0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float: left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover {
width: 37.33%;
color: white;
background: darkblue;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul:hover > li {
width: 31.33%;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
<div id="title">
<h1>Projects Home</h1>
</div>
<div id="nav">
<ul>
<li><a href="">Project 1</a>
</li>
<li><a href="">Project 2</a>
</li>
<li><a href="">Project 3</a>
</li>
</ul>
</div>
我无法弄清楚原因。
transition
属性放在:hover
选择器内。这意味着过渡仅在鼠标悬停在元素上时应用,而在其他情况下则不应用。过渡属性应在li
选择器内指定。 - Harry