Css 链接上的悬停效果不起作用

***编辑：

寻求调试帮助的问题（“此代码为什么不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题本身中重现这些问题所需的最短代码。没有明确问题说明的问题对其他读者没有用。请参阅：如何创建最小、完整且可验证的示例–马克·B、默顿·莫尔纳、林肯特、匿名、约书亚·摩尔”

代码是提供的；问题是指定的；有一个明确的问题……如果我不明白问题是什么，我怎么可能需要比我描述的更多呢

***结束

请帮忙

两个例子：

(一) css:

(二) css:

在第一种情况下，悬停效果很好，但在第二种情况下就不行了。我不明白为什么。它也会对链接产生影响

---

请帮助在第二个示例中，您的目标是

.aa

而不是

.link

.aa

是

.link

和

的子对象。popup

是

的下一个同级。link

选择器选择下一个同级对象。

.popup

不是

.aa

的下一个同级对象，它是

.aa

为什么要使用

.link:hover+.popup

作为选择器：

    .link:hover + .popup {
        display: block;
    }

---

我强烈建议你把问题的标题改成更具描述性的问题。是的，你是对的。希望我能取代<代码>。AA: HOR+。弹出< <代码> > <代码>链接：HOFL+.弹出< /代码>，然后它的工作，到底是什么问题？看看我的第一个JSfDeld，pal. Ilpo Oksanen提供了正确的AN。谢谢！现在很清楚了。但是你能告诉我，为什么当我瞄准元素时它不起作用吗？下面是一个JSFIDLE：

    .link-with-popup {
        position: relative;
        z-index: 100;
        margin-bottom: 10px;
        font: normal 11px tahoma;
    }

    .link-with-popup:hover {
        z-index: 200;
    }

    .link {
        background: #E0EAF1;
        padding: 10px 0;
        width: 100px;
        text-align: center;
        cursor: pointer;
    }

    .link:hover {
        background: #c4dae9;
    }
    .aa {
        color:#FF00FF;
    }
    /* The problem */
    .aa:hover + .popup {
        display: block;
    }
    /* /The problem */
    .popup {
        position: absolute;
        top: 0;
        left: 0;
        width: 400px;
        bottom: 0;
        display: none;
    }

    .popup:hover {
        display: block;
    }

    .popup .box {
        position: absolute;
        top: 0;
        left: 130px;
        right: 0;
        bottom: 0;
        background: #505050;
        color: #fff;
        padding: 10px 20px;
    }

    .link:hover + .popup {
        display: block;
    }