Question

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

我希望background-color对于每个div都不同，但是我发现这样做的唯一方法是让每个旋转div的背景颜色相同。这是使用CSS中的.trigger:hover > .hover-img {定义的。

如何为每次旋转background-color制作div不同的颜色？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

你可以使用#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;
}

Answer 2

请勿在{{1}}上添加背景声明，而是在.hover-img上声明

.imgX

CSS旋转Div背景颜色

2 个答案: