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

Question

当我将鼠标悬停在.price-box上时，我想要动画（实际上仅更改颜色）所有元素。

以下是代码：

https://jsfiddle.net/tyngfud6/

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

最终结果看起来应该与此类似：

sample

Answer 1

Adrian_25

如果您希望在悬停时更改颜色：

ScrollEvent

基于你的jsfiddle：

.price-box .child-element {
    default styles;
}

.price-box:hover .child-element {
    hover styles;
}

在这里注意，你尝试做了什么？

#price .price-box:hover button {
    background-color: #FFF;
    color:#27c7ab;
}

Answer 2

您可以使用css3 transition，即：transition: background-color 0.5s linear;

制作像

这样的悬停样式

#price .price-box .white-circle {
    background-color: green;
    transition: background-color 0.5s linear;
}

#price .price-box:hover .white-circle {
    background-color: red;
}

你的小提琴https://jsfiddle.net/tyngfud6/4/

Answer 3

如果您希望单元素悬停操纵多个元素，则必须使用javascript。使用jQuery，您可以使用toggleClass这样做：

$(function() {
    $(".price-box").hover(function() {
        $(".price-box").toggleClass("active");
    });
});

然后为具有所需属性的元素提供一个active类。这是一个有效的例子：https://jsfiddle.net/tyngfud6/3/

Answer 4

将transition: background 3s添加到#price .price-box会在悬停超过3秒后为背景设置动画。

#price .price-box {
    border: 2px solid #dbdbdb;
    width: 330px;
    height: 500px;
    background-color: #f8f8f8;
    margin:75px 10px;
    float: left;
    position:relative;
    text-align: center;
  transition: background 3s;  /*secs value can change*/
  -webkit-transition: background 3s; /*secs value can change*/
}

Answer 5

这是您需要添加的代码，以使hover effect与样本图像相同。

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

您需要对剩余的框进行其他更改，这与上面的代码非常类似。

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;