我有一个包含 :after
伪元素的 div 我希望能够将鼠标悬停在 div 上,然后显示 :after
元素
HTML
<div class="about-us_creative-technology_top-box">
<div class="about-us_creative-technology_h1">
<h1>Creative<br>Technology</h1>
</div>
<ul>
<li>Mobile and Web Application Development</li>
<li>Product Development</li>
<li>Software Development and Management</li>
<li>Architecture and Design</li>
<li>Cloud Management, Strategy and Management</li>
</ul>
</div>
<div class="about-us_creative-technology_square">
</div>
CSS
&_top-box{
height: 25vw;
position: relative;
&:hover + &:after{
display: block;
}
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #F2F2F2;
border-width: 25px;
margin-left: -25px;
z-index: 2;
display: none;
}
现在我尝试使用 &:hover + &:after{
显示: block ;
}
但我似乎无法让它工作,有谁知道我该怎么做?
最佳答案
您的选择器有误。它说它是下一个 sibling ,但它不是。
&:悬停 + &:之后{
摆脱它,就去做
&:hover::after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #F2F2F2;
border-width: 25px;
margin-left: -25px;
z-index: 2;
display: block;
}
关于javascript - 我想将鼠标悬停在一个 div 上并显示一个伪元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48180077/