2016-04-24 141 views
4

下面是我正在使用的HTML和CSS。不幸的是,已經提出的問題沒有給出答案。基本上,它減少了所有兄弟姐妹的寬度,並增加了懸停的兄弟姐妹的寬度。我正在使用ease-in-out,但轉換的OUT部分只是瞬間跳回原始狀態。CSS寬度轉換出不起作用

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>

我想不通這是爲什麼。

+1

不要把'內'transition'屬性:hover'選擇。這意味着只有在鼠標位於元素上時才適用該轉換,否則不適用。 transition屬性應該在'li'選擇器中指定。 – Harry

+1

@哈利已解決它請張貼爲答案 –

+0

塞巴斯蒂安布羅施的答案是正確的,除了*替換*部分,所以我不會發布什麼幾乎是一個騙局。我很高興評論幫助你:) – Harry

回答

1

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

在你的情況下,由於transition僅指定中ul:hover > li:hoverul: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>

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>

+0

我認爲OP有'ul:hover li'選擇器,因爲他們希望另外兩個'li'(除了被徘徊的那個)減少寬度,因此你不應該*替換那個選擇器。 – Harry

+0

不幸的是,雖然它會解決在三個按鈕右側留下空間的動畫。 –

+0

@哈利正確。 –