CSS效果:hover::after on子元素on :hover on parent

Question

当我在div上悬停时，我很难在div的文本上获得CSS悬停效果。

当我将鼠标悬停在.card-about div上时，我希望通过:hover::after效果对.mark-heading标记文本加下划线。

​

.card-about::after {
  margin: auto;
  padding: 1px 0px;
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #000000;
  transition: width 0.5s;
}

.card-about:hover::after {
  margin: auto;
  width: 100%;
  transition: width 0.3s;
}

<div class="card-about">
  <div class="justify-content-center d-flex">
    <img class="rounded-circle" src="delivery.png" alt="Generic placeholder image" width="140" height="140">
  </div>
  <h4 class="mark-heading">Free Delivery</h4>
  <div class="about-box-content d-block">Some text here</div>
</div>

​

Answer 1

如果希望将下划线应用于.mark-heading元素，只需将CSS选择器更改为以该元素为目标而不是.card-about

​

.mark-heading::after{
  margin: auto;
  padding: 1px 0px;
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #000000;
  transition: width 0.5s;
}

.card-about:hover .mark-heading::after {
  margin: auto;
  width: 100%;
  transition: width 0.3s;
}

<div class="card-about">
  <div class="justify-content-center d-flex">
    <img class="rounded-circle" src="delivery.png" alt="Generic placeholder image" width="140" height="140">
  </div>
  <h4 class="mark-heading">Free Delivery</h4>
  <div class="about-box-content d-block">Some text here</div>
</div>

​

Answer 2

我不太明白你为什么需要:hover::after。

添加以下行：

.card-about:hover .mark-heading {
  text-decoration: underline;
}

当 .card-about悬停时，这将选择.mark-heading div 。

​

.card-about::after {
  margin: auto;
  padding: 1px 0px;
  content: '';
  display: block;
  width: 0;
  height: 3px;
  background: #000000;
  transition: width 0.5s;
}

.card-about:hover::after {
  margin: auto;
  width: 100%;
  transition: width 0.3s;
}

.card-about:hover .mark-heading {
  text-decoration: underline;
}

<div class="card-about">
  <div class="justify-content-center d-flex">
    <img class="rounded-circle" src="delivery.png" alt="Generic placeholder image" width="140" height="140">
  </div>
  <h4 class="mark-heading">Free Delivery</h4>
  <div class="about-box-content d-block">Some text here</div>
</div>

​