Question

我正在努力制作仅限CSS的下拉列表。我有一些CSS，当一个导航项目悬停时，它的背景颜色会发生变化。

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

使用此CSS，背景会更改为新颜色，但在转换时它不会褪色。然而，它确实会在mouseout上淡出旧颜色。为什么转换仅适用于mouseout？如何通过mouseover和mouseout使背景消失？ FIDDLE

Answer 1

你不能，渐变不支持过渡

你可以做什么？

在li下添加另一个具有相同宽度，高度和位置的元素，此元素具有渐变背景，并在悬停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转换仅适用于mouseout

1 个答案: