Question

当父元素的父元素悬停在上方时，我想使其伪元素的边界移动。基本上，我希望它在悬停在“ 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%;
}

Answer 1

我试图或多或少地了解您的问题，当您将psuedo悬停在整个lk元素上时，希望将其激活。如果是这样，请尝试将悬停psuedo类添加到lk元素，并使用>选择器

指示需要影响哪个元素

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

将psuedo元素悬停在其父元素的父标签上时使其移动

1 个答案: