Question

当我将鼠标悬停在父元素width + height上时，我试图获取图片#add-cc-img的{{1}}和#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;
}

Answer 1

使用transform: scale，它会以更好（看起来）的方式调整图像大小

（并删除#add-new-cc:hover #add-cc-img { ... }中的逗号）

我已将transition: .5s;添加到#add-cc-img { ... }规则中，因此它也会在非悬停时设置动画。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

似乎你不需要在这里使用逗号：#add-new-cc：hover，＃add-cc-img。没有逗号它似乎应该工作

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

如何在悬停在父元素上时更改子元素

3 个答案: