html - 组合悬停不起作用

Question

<div class="knoppen">
                <a class="test">HOVER?!</a>
                <span class="icon"><a><i class="fa fa-home"></i></a></span>
                <span class="icon"><i class="fa fa-book"></i></span>
                <span class="icon"><i class="fa fa-euro"></i></span>
            </div>

        <div class="sidecontent">
    <ul>
        <li><span class="test"><i class="fa fa-bars"></i></span><a href="formulieren.html">Formulieren</a></li>
        <li><span class="test"><i class="fa fa-share"></i></span>Contactpersonen</li>
        <li><span class="test"><i class="fa fa-pencil"></i></span>Adressen</li>
    </ul>
        </div>

还有我的 CSS:

div.sidecontent {
        margin-left: -30px;
        display: none;
    }

a.test:hover + div.sidecontent
{
    color: red;
    display: block;
    }

有谁知道为什么我的组合悬停在这种情况下不起作用？在我的测试页面上它可以工作，但是当我试图让它在这里工作时..它只是没有:我已经尝试了一切但没有工作结果；

Answer 1

您的 a.test 似乎不是 div.sidecontent 的邻居，而 CSS 选择器“+”选择的元素恰好紧跟 标记