CSS 旋转 Div 背景颜色

Question

我已经使用 CSS 动画实现了旋转 divs。每个 div 内部都有一个图像，悬停时 div 会旋转。旋转时，图像应隐藏显示并替换为 div 中显示的具有特定 background-color.

的文本

我希望每个 div 的 background-color 都不同，但目前我发现的唯一方法是让每次旋转的背景颜色相同 div.这是在 CSS.

中使用 .trigger:hover > .hover-img { 定义的

如何让每次旋转的 background-color 不同 div？

    .trigger {
    width:200px;
    height:200px;
    }
    .trigger.large {
    width: 400px;
    }
    .trigger.vertical {
    height: 400px;
    }
    .trigger.vertical * {
    height: 400px;
    }
    .hover-img, .hover-img.hover_effect {
 position: relative;
 width: 200px;
 height: 200px;
 -webkit-transition: all 1s ease-in-out;
 -moz-transition: all 1s ease-in-out;
 -ms-transition: all 1s ease-in-out;
 -o-transition: all 1s ease-in-out;
 transition: all 1s ease-in-out;
 -webkit-transform-style: preserve-3d;
 text-align: center;
 font-size: 0;
 -webkit-user-select: none;
 -webkit-touch-callout: none;
 border-style: solid;
 border-width: 1px;
 border-color: #CCCCB2;
 border-radius: 5px;
    }
    .trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
    width: 400px;
    }
    .trigger:hover > .hover-img {
 -webkit-transform: rotateY(180deg);
 -moz-transform: rotateY(180deg);
 -ms-transform: rotateY(180deg);
 -o-transform: rotateY(180deg);
 transform: rotateY(180deg);
 font-size: 14px;
 color: #FFF;
 background-color: #f47878;
    }
    .trigger:hover .hover-img img {
     display: none;
    }
    #container {
    width:960px;
    margin: 0 auto;
    }
    .row {
    display: flex;
    }
    .col {
    display:inline-block;
    }
    .trigger.large .hover-img, .trigger.large .hover-img.hover_effect {
    width: 400px;
    }

        <div class="col">
            <div class="trigger">
                <div tabindex="0" class="maincontent hover-img img4"><img src="STEP1.jpg" width="200"/>Text Here 4</div>
            </div>
            <div class="trigger">
                <div tabindex="0" class="maincontent hover-img img5"><img src="STEP3.jpg" width="200"/>Text Here 5</div>
            </div>
        </div>
        <div class="col">
            <div class="trigger">
                <div tabindex="0" class="maincontent hover-img img6"><img src="STEP2.jpg" width="200"/>Text Here 6</div>
            </div>
            <div class="trigger">
                <div tabindex="0" class="maincontent hover-img img7"><img src="STEP4.jpg" width="200"/>Text Here 7</div>
            </div>
        </div>

Answer 1

不要在 .hover-img 上包含背景声明，而是在 .imgX

上声明

.img1 { background: white; }
.img2 { background: blue; }
.img3 { background: red; }
.img4 { background: green; }

Answer 2

您可以使用独特的 class，正如 #Ruddy 所说，没什么大不了的。

.trigger:hover > .hover-img.img4 {
    background-color: #f00;
}
.trigger:hover > .hover-img.img5 {
    background-color: #ff0;
}
.trigger:hover > .hover-img.img6 {
    background-color: #000;
}
.trigger:hover > .hover-img.img7 {
    background-color: #0ff;
}

CSS 旋转 Div 背景颜色

CSS Spinning Div Background Color

html

css

background-color