html - 在将鼠标悬停在其父级的父级标签上时使伪元素移动
问题描述
我想让我的伪元素的边框在其父元素的父元素悬停时移动。基本上,当我将鼠标悬停在"lk"上时,我希望它移动,而不是仅在悬停在"ci"上时激活,但我似乎无法让它工作。它只适用于div吗?如果是这样,我愿意接受这个选项。我已经尝试过使用 div 进行类似的操作,但我似乎仍然无法让它工作,所以我很高兴学习如何去做。
HTML
<lk><de>Name:</de><ci>Luci`a Bloom</ci></lk>
CSS
lk{
margin-right:49px;
}
de{
color:black;
font-family:karla;
font-weight:900;
border-bottom:1px solid #EAEAEA;
padding-bottom:5px;
padding-right:7px;
}
ci{
color:black;
text-transform: uppercase;
margin-left:1px;
font-family:calibri;
border-bottom:1px solid #EAEAEA;
padding-bottom:5px;
font-weight:200;
position: relative;
font-size:15px;
color: black;
width: fit-content;
margin-left:1px
}
ci:after {
content: "";
border-bottom:1px solid black;
width: 100%;
height: 120%;
position: absolute;
top: -5px;
z-index: 1;
right:0px;
transition: 2.5s;
}
#deetz ci:hover:after{
border-bottom:1px solid black;
transition: 2.5s;
width:0%;
}
解决方案
我试图或多或少地理解您的问题,您希望在将鼠标悬停在整个 lk 元素上时激活伪悬停。如果是这样,请尝试将悬停伪类添加到 lk 元素并使用 > 选择器指示它需要影响的元素
lk:hover > ci:after{
border-bottom:1px solid black;
transition: 2.5s;
width:0%;
}
推荐阅读
- excel - 鼠标悬停结束后如何结束宏(或触发不同的宏)
- java - 从两个列表创建映射,键和值作为相同的对象
- angular - 如何在 Angular CLI 6: angular.json 中添加 Sass 编译?
- java - OracleJDK/Hotspot 9 GC 日志记录标志 - 如何查看 G1GC 中花费的时间
- node.js - 使用 Node.Js 和 Promises,你如何返回一个已经实现的 Promise?
- html - 仅使用 css 变换 translate 来控制动画而不是边距和其他非优化
- java - EnumMap 的 Spring bean 配置
- javascript - eval() 当传递给它的字符串的一部分有小数时触发 Unexpected number
- object - Debian 8.0 Jessie:无法识别 MAKE .o 文件
- python-3.x - 如何解决 BrokenPipeError: [Errno 32] Python 3.6 中的断管?