如何使子元素在父元素上方悬停时进行更改

Question

当我在父元素width + .credit-card上盘旋时，我试图获得图像#add-cc-img的#add-new-cc和.credit-card。如何保持父级的width和height保持原来的形式，并且只更改图像的大小？

​

.credit-card {
  border: 1px solid #CDCDCD;
  width: 30%;
  height: 250px;
  display: inline-block;
  margin: 20px 3% 20px 0;
  vertical-align: top;
}
.credit-card-inner {
  margin: 25px;
}
#add-new-cc {
  cursor: pointer;
  transition: .5s;
  -webkit-transition: .5s;
}
#add-new-cc:hover,
#add-cc-img {
  background: #F7F7F7;
  transition: .5s;
  -webkit-transition: .5s;
  height: 125px;
  width: 125px;
}
#add-new-cc-title {
  font-size: 1.3em;
  margin-bottom: 40px;
  text-align: center;
}
#add-cc-img {
  height: 100px;
  width: 100px;
  display: block;
  margin: 0 auto;
}

<div class="credit-card" id="add-new-cc">
  <div class="credit-card-inner">
    <h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
    <img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img">
  </div>
</div>

​

Answer 1

使用transform: scale，它将以更好的方式调整图像的大小

(并删除#add-new-cc:hover #add-cc-img { ... }__中的逗号)

我将transition: .5s;添加到#add-cc-img { ... }规则中，因此它也将在un上显示动画。

​

.credit-card {
  border: 1px solid #CDCDCD;
  width: 30%;
  height: 250px;
  display: inline-block;
  margin: 20px 3% 20px 0;
  vertical-align: top;
}
.credit-card-inner {
  margin: 25px;
}
#add-new-cc {
  cursor: pointer;
  transition: .5s;
  -webkit-transition: .5s;
}
#add-new-cc-title {
  font-size: 1.3em;
  margin-bottom: 40px;
  text-align: center;
}
#add-cc-img {
  height: 100px;
  width: 100px;
  display: block;
  margin: 0 auto;
  transition: .5s;
}
#add-new-cc:hover #add-cc-img {
  background: #F7F7F7;
  transition: .5s;
  transform: scale(1.25);
}

<div class="credit-card" id="add-new-cc">
  <div class="credit-card-inner">
    <h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
    <img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img">
  </div>
</div>

​

Answer 2

似乎您不需要在这里使用逗号：#：悬浮，#。没有逗号，它似乎正常工作。

​

.credit-card {
  border: 1px solid #CDCDCD;
  width: 30%;
  height: 250px;
  display: inline-block;
  margin: 20px 3% 20px 0;
  vertical-align: top;
}
.credit-card-inner {
  margin: 25px;
}
#add-new-cc {
  cursor: pointer;
  transition: .5s;
  -webkit-transition: .5s;
}
#add-new-cc:hover
#add-cc-img {
  background: #F7F7F7;
  transition: .5s;
  -webkit-transition: .5s;
  height: 125px;
  width: 125px;
}
#add-new-cc-title {
  font-size: 1.3em;
  margin-bottom: 40px;
  text-align: center;
}
#add-cc-img {
  height: 100px;
  width: 100px;
  display: block;
  margin: 0 auto;
}

<div class="credit-card" id="add-new-cc">
  <div class="credit-card-inner">
    <h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
    <img src="images/add-circle.png" alt="Add New Credit Card" id="add-cc-img">
  </div>
</div>

​

Answer 3

在选择器之间放置逗号时，您将创建一个将执行一条规则的不同选择器的列表。这就是你所拥有的：

#add-new-cc:hover, #add-cc-img {
  background: #F7F7F7;
  transition: .5s;
  -webkit-transition: .5s;
  height: 125px;
  width: 125px;
}

相反，您需要一个子代选择器来完成这项工作(用空格替换逗号)：

#add-new-cc:hover #add-cc-img {
  background: #F7F7F7;
  transition: .5s;
  height: 125px;
  width: 125px;
}

​

.credit-card {
  border: 1px solid #CDCDCD;
  width: 30%;
  height: 250px;
  display: inline-block;
  margin: 20px 3% 20px 0;
  vertical-align: top;
}
.credit-card-inner {
  margin: 25px;
}
#add-new-cc {
  cursor: pointer;
  transition: .5s;
  -webkit-transition: .5s;
}
#add-new-cc:hover #add-cc-img {
  background: #F7F7F7;
  transition: .5s;
  height: 125px;
  width: 125px;
}
#add-new-cc-title {
  font-size: 1.3em;
  margin-bottom: 40px;
  text-align: center;
}
#add-cc-img {
  height: 100px;
  width: 100px;
  display: block;
  margin: 0 auto;
}

<div class="credit-card" id="add-new-cc">
  <div class="credit-card-inner">
    <h3 class="blue sans-pro" id="add-new-cc-title">Add New Card</h3>
    <img src="http://i.imgur.com/60PVLis.png" alt="Add New Credit Card" id="add-cc-img">
  </div>
</div>

​