CSS 效果 :hover::after 在子元素上 :hover 在父元素上

Posted 2023-03-06

【中文标题】CSS 效果 :hover::after 在子元素上 :hover 在父元素上

【英文标题】：CSS effect :hover::after on child element on :hover on parent

【发布时间】：2021-09-23 08:13:43

【问题描述】：

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

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

.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"   >
  </div>
  <h4 class="mark-heading">Free Delivery</h4>
  <div class="about-box-content d-block">Some text here</div>
</div>

【参考方案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"   >
  </div>
  <h4 class="mark-heading">Free Delivery</h4>
  <div class="about-box-content d-block">Some text here</div>
</div>

【讨论】：

我想要它通过一个过渡效果。当我悬停时，它的宽度从 0% 扩展到 !00%。当我将鼠标从 div 中移出时，它会缩小到 0% 宽度。

这就是这段代码的作用，你可以在 sn-p 中看到

【参考方案2】：

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

添加以下行：

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

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

.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"   >
  </div>
  <h4 class="mark-heading">Free Delivery</h4>
  <div class="about-box-content d-block">Some text here</div>
</div>

【讨论】：

我想要它通过过渡效果。当我悬停时，它的宽度从 0% 扩展到 !00%。当我从 div 鼠标移出时，它会缩小到 0% 宽度。