CSS transition only working on mouseout

Question

I am trying to make CSS-only dropdowns. I have some CSS that, when a nav item is hovered, its background color changes.

.horiz-nav {
  background: linear-gradient(#EEE, #900) no-repeat fixed;
  border: none;
  outline: none;
}
.horiz-nav ul {
  list-style: none;
}
.horiz-nav ul li {
  display: inline-block;
  padding: 1.2em;
  clear: none;
  float: left;
  margin: 0 0;
  background: #000;
  width: 10em;
  transition: all .5s ease-in;
}
.horiz-nav ul ul {
  display: none;
  position: absolute;
  top: 73px;
  height: 0;
  transition: all .5s ease-in;
}
.horiz-nav ul ul li {
  background: linear-gradient(#000, #F50) no-repeat fixed;
  padding: 7px;
  margin: 0 3px;
  color: #FFF;
}
.horiz-nav ul li:hover {
  background: linear-gradient(to bottom, #808080, #80108F);
}
.horiz-nav ul li:hover > ul {
  display: block;
  height: auto;
}
.horiz-nav ul li:hover > ul li {
  display: list-item;
  position: relative;
  float: none;
  left: -62px;
}

<nav class="horiz-nav">
  <ul>
    <li class="title"><a href="#">Example.com</a>
    </li>
    <li><a href="#">About</a>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">Programming <span class="caret"></span></a>

      <ul>
        <li>HTML</li>
        <li>PHP</li>
      </ul>
    </li>
  </ul>
</nav>

With this CSS, the background changes to the new color, but it doesn't fade, with the transition. It does, however fade back to the old color on mouseout. Why is the transition only working on mouseout? And how can I make the background fade by both mouseover and mouseout? FIDDLE

Check this out. Because you are using `gradients` this will give you some insight: http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds — disinfor, Jul 30 '15 at 15:05

Elheni Mokhles · Answer 1 · 2015-07-30T15:26:01.710

You can't, Gradients don't support transitions

What you can do ?

Add another element under the li with same width and height and position, this element has the gradient background, and play with his opacity when hovering the li.

li .background-holder{
    position   : absolute;
    width      : 100%;
    height     : 100%;
    top        : 0;
    left       : 0;
    background : linear-gradient(to bottom, #808080, #80108F);
    opacity    : 0;
    transition : all 0.5;
}
li:hover .background-holder{
    opacity  : 1;
}

JSFiddle : http://jsfiddle.net/qrky8yyp/1/

CSS transition only working on mouseout

1 Answers1