更新

Question

我希望为我的辅助导航中的每个选项添加不同的背景颜色。我已经尝试了一些东西，但它只会让代码变得无法相信。必须有一个更简单的方法。提前致谢。

<div class="container">
            <section> <!--class="color-4"-->
                <nav class="cl-effect-2">
                    <a href="#"><span data-hover="Option 1">Option 1</span></a>
                    <a href="#"><span data-hover="Option 2">Option 2</span></a>
                    <a href="#"><span data-hover="Option 3">Option 3</span></a>
                    <a href="#"><span data-hover="Option 4">Option 4</span></a>
                    <a href="#"><span data-hover="Option 5">Option 5</span></a>
                    <a href="#"><span data-hover="Option 6">Option 6</span></a>
                </nav>
            </section>
        </div><!-- /container -->

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.container {
    width:100%;
    float:left;
    margin: 100px 0 0 0 !important;
}
/* Effect 2: 3D rolling links, idea from http://hakim.se/thoughts/rolling-links */
.cl-effect-2 a {
    line-height: 44px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
}

.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background: #231f20;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.csstransforms3d .cl-effect-2 a span::before {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    content: attr(data-hover);
    -webkit-transition: background 0.3s;
    -moz-transition: background 0.3s;
    transition: background 0.3s;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

.cl-effect-2 a:hover span,
.cl-effect-2 a:focus span {
    -webkit-transform: rotateX(90deg) translateY(-22px);
    -moz-transform: rotateX(90deg) translateY(-22px);
    transform: rotateX(90deg) translateY(-22px);
}

.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background: #231f20;    
}

nav a {
    position: relative;
    display: inline-block;
    margin: 15px 78px;
    outline: none;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}

nav a:hover,
nav a:focus {
    outline: none;
}

Answer 1

这些选项中的每一个都有this

[data-hover="Option 1"],
[data-hover="Option 1"]::before
{
  background-color:red!important;
}

显然，如果您对选择器更具体，那么您可以取消!important，但这应该会让您有所了解。

更新

我明白你的意思了。

尝试this然后

.cl-effect-2 a span[data-hover="Option 1"],
.csstransforms3d .cl-effect-2 a:hover span[data-hover="Option 1"]::before,
.csstransforms3d .cl-effect-2 a:focus span[data-hover="Option 1"]::before
{
  background-color:#c00;
}

之前发生的事情是由!important声明导致之前的过渡颜色

如果你想改变过渡颜色。只需在最后一条规则之前添加它。 DEMO

.csstransforms3d .cl-effect-2 a span[data-hover="Option 1"]::before
{
  background-color:orange;
}

Answer 2

你想用相同的颜色为所有跨度着色吗？

编辑CSS：

/* Front Side */
.cl-effect-2 a span {
    position: relative;
    display: inline-block;
    padding: 0 14px;
    background-color: your_color; /* Edited CSS */
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform-origin: 50% 0;
    -moz-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/* Bottom Side */
.csstransforms3d .cl-effect-2 a:hover span::before,
.csstransforms3d .cl-effect-2 a:focus span::before {
    background-color:your_color; /* Edited CSS */   
}

<强>更新对于不同颜色的不同跨度，请使用类，将类添加到跨度，如红色，绿色或蓝色。

HTML：

<div class="container">
<section> <!--class="color-4"-->
<nav class="cl-effect-2">
<a href="#"><span class="red" data-hover="Option 1">Option 1</span></a>
<a href="#"><span class="blue" data-hover="Option 2">Option 2</span></a>
<a href="#"><span class="green" data-hover="Option 3">Option 3</span></a>
<a href="#"><span  class="red" data-hover="Option 4">Option 4</span></a>
<a href="#"><span class="green" data-hover="Option 5">Option 5</span></a>
<a href="#"><span class="blue" data-hover="Option 6">Option 6</span></a>
</nav>
</section>
</div><!-- /container -->

CSS：

.red{background-color:red !important;}
.green{background-color:green !important;}
.blue{background-color:blue !important;}

/* !important is needed to override the previous CSS.*/

.cl-effect-2 a span.red::before,
.cl-effect-2 a:hover span.red::before,
.cl-effect-2 a:focus span.red::before {
    background-color: red;  
}
.cl-effect-2 a span.green::before,
.cl-effect-2 a:hover span.green::before,
.cl-effect-2 a:focus span.green::before {
    background-color: green;    
}
.cl-effect-2 a span.blue::before,
.cl-effect-2 a:hover span.blue::before,
.cl-effect-2 a:focus span.blue::before {
    background-color: blue; 
}

已编辑CodePen。

为nav元素添加不同的颜色

2 个答案:

更新