html - 当我将鼠标悬停在盒子上时，如何为盒子中的所有元素设置动画？

Question

当我将鼠标悬停在 .price-box 上时，我想为 .price-box 中的所有元素制作动画(实际上只改变颜色)。

代码如下:

https://jsfiddle.net/tyngfud6/

如果可能的话，我只想在 css 中做。

最终结果应该类似于以下内容:

sample

Answer 1

这是您需要添加的代码，以获得与示例图像相同的悬停效果。

#price .price-box:hover {
    background-color: #27c7ab;
}
#price  > .container > .price-box:hover > .circle-price{
  background:white;
}
#price  > .container > .price-box:hover > .circle-price > p{
  color:#27c7ab;
}
#price  > .container > .price-box:hover > h1{
  color:white;
}
#price  > .container > .price-box:hover > button{
  background:white;
  color:#27c7ab;
}

其余框的其他更改需要由您完成，并且与上面的代码非常相似。

#price {
	background-color: #f1f1f1;
	padding-top: 50px;
	padding-bottom: 30px;
}

#price .label-price {
	font-size: 20px;
	text-transform: uppercase;
	border-bottom: 6px solid #26bfa1;
	margin-left: 10px;
}



#price .price-box {
	border: 2px solid #dbdbdb;
	width: 330px;
	height: 500px;
	background-color: #f8f8f8;
	margin:75px 10px;
	float: left;
	position:relative;
	text-align: center;
}

#price .price-box:hover {
	background-color: #27c7ab;
}
#price  > .container > .price-box:hover > .circle-price{
  background:white;
}
#price  > .container > .price-box:hover > .circle-price > p{
  color:#27c7ab;
}
#price  > .container > .price-box:hover > h1{
  color:white;
}
#price  > .container > .price-box:hover > button{
  background:white;
  color:#27c7ab;
}
#price .price-box .white-circle {
	height: 55px;
	width: 55px;
	background-color: #f8f8f8;
	border-radius: 100%;
	border: 2px solid #dbdbdb;
	position: absolute;
	top:-35px;
	left: 136px;
}

#price .price-box .grey-circle {
	height: 25px;
	width: 25px;
	background-color: #c2c2c2;
	border-radius: 100%;
	border: 2px solid #dbdbdb;
	position: absolute;
	top:-20px;
	left: 151px;
}

#price .price-box h1 {
	text-transform: uppercase;
	color: #26bfa1;
	font-weight: normal;
	margin-top: 30px;

}

#price .price-box .circle-price {
	border-radius: 100%;
	border: 2px solid #dbdbdb;
	width: 130px;
	height: 130px;
	margin-top: 50px;
	position: absolute;
	top:30px;
	left: 100px;
	background-color: white;
	text-align: center;

}

#price .price-box .circle-price p:first-of-type {
	background-color: transparent;
	margin-top: 10px;
	margin-left: 10px;
	font-size: 40px;
	font-weight: bold;
	color: #c7c7c7;

}

#price .price-box .circle-price sup {
	font-size: 16px;
	vertical-align: super;
}

#price .price-box .circle-price p:nth-of-type(2) {
	background-color: transparent;
	margin-top: -15px;
	font-size: 16px;
	color: #c7c7c7;
}

#price .price-box p {
	font-size: 20px;
	padding: 10px 25px;
}




#price .price-box p:first-of-type {
	background-color: #e4e4e4;
	color: #909090;
	margin-top: 185px;

}

#price .price-box p:nth-of-type(2) {
	background-color: #f1f1f1;
	color: #8c8c8c;
}

#price .price-box p:nth-of-type(3) {
	background-color: #e4e4e4;
	color: #909090;
}

#price .price-box p:nth-of-type(4) {
	background-color: #f1f1f1;
	color: #8c8c8c;
}

#price .price-box button {
	font-size: 15px;
	color:white;
	padding: 10px 30px;
	border-radius:10px;
	background-color:#26bfa1;
	border: none;
	position: absolute;
	bottom: 20px;
	left:100px;

}

<section id="price">
        <div class="container clearfix">
            <p class="label-price">Cennik</p>
            <div class="price-box">
                <div class="white-circle"></div>
                <div class="grey-circle"></div>
                <h1>Basic plan</h1>
                <div class="circle-price">
                    <p>85<sup>99</sup></p>
                    <p>PLN/MSC</p>
                </div>
                <p class="option1">Zakup towaru + serwis</p>
                <p class="option2">Dowoz</p>
                <button>DOŁĄCZ</button>
            </div>
            <div class="price-box" "price-box2">
                <div class="white-circle"></div>
                <div class="grey-circle"></div>
                <h1>Basic plan</h1>
                <div class="circle-price">
                    <p>95<sup>99</sup></p>
                    <p>PLN/MSC</p>
                </div>
                <p class="option1">Zakup towaru + serwis</p>
                <p class="option2">Dowoz</p>
                <p class="option3">Gwarancja 5 lat</p>
                <button>DOŁĄCZ</button>
            </div>
            <div class="price-box" "price-box3">
                <div class="white-circle"></div>
                <div class="grey-circle"></div>
                <h1>Basic plan</h1>
                <div class="circle-price">
                    <p style="margin-left:0">211<sup>00</sup></p>
                    <p>PLN/MSC</p>
                </div>
                <p class="option1">Zakup towaru + serwis</p>
                <p class="option2">Dowoz</p>
                <p class="option3">Gwarancja 6 lat</p>
                <p class="option4">Porady projektanta</p>

                <button>DOŁĄCZ</button>
            </div>
        </div>
    </section>