将鼠标悬停在其父标签的父标签上时使伪元素移动答案

【问题标题】：Making psuedo element move upon hovering over its parent's parent tag将鼠标悬停在其父标签的父标签上时使伪元素移动
【发布时间】：2019-04-01 21:59:14
【问题描述】：

我想让我的伪元素的边框在其父元素的父元素悬停时移动。基本上我希望它在我将鼠标悬停在 "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%;
}

【问题讨论】：

你可以给父元素添加一个 mouseOver 事件监听器，并给它一个回调函数来获取你想要操作的子元素，然后从那里做任何你想做的事情。
@HolyMoly 那是什么？以及如何插入？
它是 JavaScript，这与您想要的类似：stackoverflow.com/questions/11202681/… 但是您可能需要根据需要对其进行调整。如果您不了解 JS，那么也许您可以通过将子 el 的 css 嵌套在父级的 :hover 中来在 css 中完成。 parent:hover { child { border: pink} }我从未尝试过，也不知道这种方法是否可行，我更像是一个 JS 而不是 Css 人。

标签： html css tags pseudo-element

【解决方案1】：

我试图或多或少地理解您的问题，您希望在将鼠标悬停在整个 lk 元素上时激活伪悬停。如果是这样，请尝试将悬停伪类添加到 lk 元素并使用 > 选择器指示它需要影响哪个元素

lk:hover > ci:after{
border-bottom:1px solid black;
transition: 2.5s;
width:0%;
}

【讨论】：

@ScarlettLucĭa Sweet！