Question

在我的导航栏上，我有4个不同的按钮，当我将它们悬停时，我希望每个按钮都有不同的颜色。

以下是用于动画的代码：

.hvr-underline {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
}

.hvr-underline:before {
   content: "";
   position: absolute;
   z-index: -1;
   left: 50%;
   right: 50%;
   bottom: 0;
   background: #2098d1;
   height: 4px;
   -webkit-transition-property: left, right;
   transition-property: left, right;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
   -webkit-transition-timing-function: ease-out;
   transition-timing-function: ease-out;
}

.hvr-underline:hover:before, .hvr-underline:focus:before, .hvr-underline:active:before {
   left: 0;
   right: 0;
}

而不是所有四个按钮都具有相同的蓝色，我希望每个按钮在动画中都有不同的颜色。

Answer 1

您可以为现有的类名添加另一个类名，例如

<li class="hvr-underline blue"><a href="#">Button1</a></li>
<li class="hvr-underline green"><a href="#">Button2</a></li>
<li class="hvr-underline red"><a href="#">Button3</a></li>
<li class="hvr-underline yellow"><a href="#">Button4</a></li>

在CSS中你可以添加另一个类似

的def

.hvr-underline.blue:before {
    background:blue;
}

.hvr-underline.green:before {
    background:green;
}

http://jsfiddle.net/34hsjLc7/4/

如何在同一动画中使用不同的背景颜色？

1 个答案: