CSS-Breite Übergang funktioniert nicht

Unten ist die HTML und CSS, die ich verwende. Leider geben die bereits gestellten Fragen nicht die erforderliche Antwort. Im Grunde verringert es die Breite aller Geschwister und erhöht die, über der es schwebt. Ich benutze ease-in-out, aber der OUT-Teil des Übergangs springt sofort in seinen ursprünglichen Zustand zurück.CSS-Breite Übergang funktioniert nicht

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>

Ich kann nicht herausfinden, warum das so ist.

Quelle

2016-04-24 Kingsley-James

Legen Sie die 'transition' Eigenschaften nicht innerhalb der': hover' Selektoren. Das würde bedeuten, dass der Übergang nur dann angewendet wird, wenn sich die Maus über dem Element befindet und nicht, wenn dies nicht der Fall ist. Die Übergangseigenschaft sollte innerhalb des Li-Selektors angegeben werden. – Harry

@Harry das hat es gelöst bitte als Antwort posten –

sebastianbrosch's Antwort ist korrekt bis auf den * replace * Teil und so werde ich nicht posten, was fast ein Betrüger sein würde. Ich bin froh, dass der Kommentar Ihnen geholfen hat :) – Harry

Jede CSS-Eigenschaft nur auf ein Element angewendet wird, wenn der Wähler abgestimmt ist. Wenn die Eigenschaft transition unter der Option :hover angegeben wird, werden sie natürlich nur angewendet, wenn der Hover aktiviert ist. Wenn wir den Mauszeiger darüber bewegen, springen sie einfach zurück, weil die transition Einstellung für das Element nicht mehr anwendbar ist.

In Ihrem Fall, da transition wird nur angegeben, innerhalb ul:hover > li:hover und ul:hover > li es nur dann angewandt wird, wenn die Maus über ein li ist oder wenn die Maus atleast über die ul (das ist, wenn wir von einem li auf einem anderen während bewegen immer noch innerhalb der ul Grenzen).

Damit die transition auch während des Mausausgangs ordnungsgemäß funktioniert, sollte sie innerhalb des li Selektors wie im folgenden Codefragment angegeben werden.

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>

Quelle

2016-04-24 15:50:47 Harry

Entfernen Sie die > auf 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>

Quelle

2016-04-24 13:07:09

Ich denke, OP hat 'ul: hover li' Selektor, weil sie wollen, dass die anderen zwei' li' (anders als der, der schwebte) in der Breite abnehmen und daher sollten Sie * diesen Selektor * nicht ersetzen. – Harry

Leider wird es die Animation auflösen, die mich mit Platz auf der rechten Seite der drei Schaltflächen verlässt. –

@Harry korrekt. –

CSS-Breite Übergang funktioniert nicht

Antwort

Verwandte Themen