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

关键词：

【中文标题】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% 宽度。

如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？

...示例中，您会看到当您将鼠标悬停在子对象上时，父悬停效果仍然处于活动状态。我想对此进行更改，以便当您将鼠标悬停在子元素 查看详情

在子元素中添加/删除类时的 CSS3 过渡动画

】在子元素中添加/删除类时的CSS3过渡动画【英文标题】：CSS3transitionanimationwhenadding/removingclassinchildelements【发布时间】：2017-03-2806:39:34【问题描述】：当向父级添加类时，CSS3过渡不适用于子元素。这是我的代码：http://jsfiddle.net... 查看详情

怎么能让div的after和before同时触发hover事件

...sp;display: inline;    margin-left: 20px;div:hover::before, div:hover::after position: absolute; div:hover::before  content: "\\5B"; left: -20px; div:hover::after  content: "\\5D"; ... 查看详情

css3中hover的使用细节

...l后面有空格会失效正确例子：ul:hover{}//ul会显示出想要的效果第二当想要在父元素添加hover在子元素的实现效果子元素应该写在hover后面空格隔开li{width:100px;height:100px;border:1pxsolid#000;tran 查看详情

css3-3d和动画

...素距离视线的距离（物体和眼睛的距离越小，近大远小的效果越明显）perspective:1200px;（在父元素中使用）?transform:perspective(1200px)（在子元素中使用）?两个都设置会发生冲突，建议只设置父元素，通常的数值在900-1200之间如果当... 查看详情

css--阴影效果

 1.曲线阴影：曲线阴影的实现原理是通过阴影的叠加效果产生的。即一个主元素设置阴影后，在主元素下面再添加一个副元素。使副元素和主元素重合，且副元素为一个弧形元素。此时主元素和副元素的阴影效果叠加产生曲... 查看详情

Selenium Webdriver 在子元素中查找元素

】SeleniumWebdriver在子元素中查找元素【英文标题】：SeleniumWebdriverfindinganelementinasub-element【发布时间】：2012-12-1213:35:21【问题描述】：我正在尝试使用Selenium（版本2.28.0）在子元素中搜索元素，但seleniumdes似乎并未将其搜索限制在... 查看详情

css伪元素：添加一些选择器的特殊效果

CSS伪元素CSS伪元素是用来添加一些选择器的特殊效果。语法伪元素的语法：selector:pseudo-element{property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element{property:value;} :first-line伪元素"first-line"伪元素用于向文本的首行设置特... 查看详情

如何使用 CSS 单元素创建镜像效果

】如何使用CSS单元素创建镜像效果【英文标题】：HowtocreatemirroredimageeffectwithCSSsingleelement【发布时间】：2016-10-2116:24:12【问题描述】：我有一个带有背景图片的HTML元素，想创建一个到底部的镜像效果，好像图片是这样反射的：对... 查看详情

css任何元素的css边框悬停效果(代码片段)

查看详情

在 CSS 悬停效果上，无法选择/应用效果到特定元素？

】在CSS悬停效果上，无法选择/应用效果到特定元素？【英文标题】：Onacsshovereffect,notabletoselect/applyeffecttoaspecificelement?【发布时间】：2020-04-1215:56:09【问题描述】：我有一个带有div叠加层的图像。div覆盖显示在悬停时。同样在悬... 查看详情

带有伪元素的 CSS 波纹效果导致回流

】带有伪元素的CSS波纹效果导致回流【英文标题】：CSSRippleeffectwithpseudo-elementcausingreflow【发布时间】：2021-01-0900:05:36【问题描述】：我正在尝试使用styled-components创建材质波纹效果（无法导入材质web-componentsmixins）。我想坚持使... 查看详情

如何在子组件 scss 文件中覆盖 main.component.scss 中的 css

】如何在子组件scss文件中覆盖main.component.scss中的css【英文标题】：Howtooverwriteacssfrommain.component.scssinachildcomponentscssfile【发布时间】：2019-03-0811:16:49【问题描述】：我的Angular6应用程序的主要组件有一个scss文件，其中我为html元素... 查看详情

强制删除从远程 css 库继承的元素的悬停 css 效果

】强制删除从远程css库继承的元素的悬停css效果【英文标题】：Forcefullyremovehovercsseffectofelementinheritedfromremotecsslibrary【发布时间】：2017-06-1523:47:39【问题描述】：我正在使用语义UI库，我的<tr>表格元素通过表格上的"... 查看详情

使用css3显示/隐藏元素的css过渡效果[重复]

】使用css3显示/隐藏元素的css过渡效果[重复]【英文标题】：csstransitioneffectsonshow/hideelementusingcss3[duplicate]【发布时间】：2016-06-0617:16:34【问题描述】：我使用了这组代码，效果很好，但是在显示/隐藏更多内容时我无法添加过渡。... 查看详情

通过css3，实现元素覆盖效果

在非常多站点中，我们都能够看到这种效果。当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图：今天我们就用hover伪类加上css3实现，没有使用不论什么JS<!DOCTYPEhtml><html><headlang="zh-cmn-Hans"><... 查看详情

您可以将 CSS 悬停效果应用于不是悬停元素的子元素的元素吗？

】您可以将CSS悬停效果应用于不是悬停元素的子元素的元素吗？【英文标题】：CanyouapplyaCSShovereffecttoanelementthat’snotachildofthehoveredelement?【发布时间】：2011-06-0108:16:56【问题描述】：我不确定这是否可能。我现在正在使用CSS3动画... 查看详情

css伪元素是用来添加一些选择器的特殊效果

CSS伪元素语法伪元素的语法：selector:pseudo-element{property:value;}CSS类也可以使用伪元素：selector.class:pseudo-element{property:value;}:first-line伪元素"first-line"伪元素用于向文本的首行设置特殊样式。在下面的例子中，浏览器会根据"first-line"... 查看详情