CSS宽度过渡效果无法正常工作

Question

以下是我正在使用的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>

我无法弄清楚原因。

- Kingsley-James

---

不要将 transition 属性放在 :hover 选择器内。这意味着过渡仅在鼠标悬停在元素上时应用，而在其他情况下则不应用。过渡属性应在 li 选择器内指定。 - Harry

@ Harry 已经解决了，请以答案的形式发布。 - Kingsley-James

sebastianbrosch的答案是正确的，除了replace部分，所以我不会发布几乎重复的内容。我很高兴评论对你有帮助 :) - Harry

我将我的评论发布为答案，因为另一个答案已经从部分正确（带有错误陈述）变成了错误的答案。 - Harry

Answer 1

将 ul:hover > li 中的 > 删除，变为 ul:hover li：

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>

- Sebastian Brosch

---

我认为OP使用ul:hover li选择器是因为他们想要另外两个li(非悬停的那一个)变窄，因此你不应该替换那个选择器。 - Harry

不幸的是，尽管它将解决动画问题，但会在三个按钮右侧留下空间。 - Kingsley-James

Answer 2

任何CSS属性只有在选择器匹配时才会应用于元素。当transition属性在:hover选择器下指定时，它们自然只在悬停时应用。当我们悬停移出时，它们就会立即回弹，因为transition设置不再适用于该元素。

在您的情况下，由于transition仅在ul:hover > li:hover和ul:hover > li中指定，因此仅在鼠标悬停在li上或至少悬停在ul上时应用（即当我们从一个li移动到另一个li时仍在ul边界内）。

要使transition在鼠标移出时正常工作，应在li选择器中指定，如下面的代码片段所示。

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;
  -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;
}
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;
}
ul:hover > li {
  width: 31.33%;
}

<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>

- Harry