Question

我有一个div，它有一个:after psuedo元素，我希望能够将其悬停在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{ display: block; }

但我似乎无法让它发挥作用，有谁知道我能做到这一点？

Answer 1

你的选择器错了。它说它是下一个兄弟姐妹而不是。

＆amp ;:hover +& amp ;: {{/ p>之后

摆脱它，只是做

    &: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;
    }

Answer 2

你可以试试这个：

＆＃13;

.about-us_creative-technology_top-box{
height: 25vw;
position: relative;
}
.about-us_creative-technology_top-box:hover::after{
display: block;
}
.about-us_creative-technology_top-box::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;
}

＆＃13;

<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>

＆＃13;

我想将鼠标悬停在div上并显示一个伪元素

2 个答案: