[英]CSS effect :hover::after on child element on :hover on parent
I am struggling to get CSS hover effect on the text of a div when I hover on the div.当我将鼠标悬停在 div 上时,我正在努力在 div 的文本上获得 CSS 悬停效果。
I want the .mark-heading
tag text to get underlined via :hover::after
effect when I hover on the .card-about
div.当我将鼠标悬停在
.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" 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>
If you want to apply the underline to the .mark-heading
element instead, simply change the CSS selectors to target that element instead of .card-about
:如果您想将下划线应用于
.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>
I don't quite see why you need :hover::after
.我不太明白你为什么需要
:hover::after
。
Add the following lines:添加以下几行:
.card-about:hover .mark-heading {
text-decoration: underline;
}
This selects the .mark-heading
div when .card-about
is hovered.当
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.