Geek Answers Handbook

CSS Width Transition not working

Below are the HTML and CSS that I use. Unfortunately, questions already asked do not provide an answer. This basically reduces the width of all siblings and increases the one that is hanging. I use ease-in-out, but the OUT part of the transition instantly returns to its original state.

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>
Run codeHide result

I can’t understand why this is so.

+4
source share
2 answers

CSS . transition :hover, , , . , , transition .

, transition ul:hover > li:hover ul:hover > li, , li 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>
Hide result
+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>
Hide result
+1

More articles:


All Articles