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>

我想不通這是爲什麼。

Answer 1

任何CSS屬性被應用到僅在選擇器被匹配的元件。當在:hover選擇器中指定transition屬性時，它們自然只在懸停打開時才應用。當我們徘徊時，它們只會反彈，因爲transition設置不再適用於該元素。

在你的情況下，由於transition僅指定中ul:hover > li:hover和ul:hover > li它得到應用，只有當鼠標移動到li或當鼠標ATLEAST在ul（也就是當我們從一個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>

Answer 2

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>