Question

*** EDITED：

“寻求调试帮助的问题（”为什么这段代码不起作用？“）必须包含所需的行为，特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他读者没用。请参阅：如何创建一个最小的，完整的，可验证的示例。“ - Marc B，MártonMolnár，LinkinTED，Anonymous，Joshua Moore“

提供代码;问题是明确的;这是一个明显的问题......如果我不明白什么是问题，我该如何描述它比我做的更多。

*** END

请帮忙！

两个例子：

1）的CSS：

        .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 */
    .link: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;
    }

jsfiddle

2）的CSS：

    .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;
    }

jsfiddle-2

在第一个中，悬停效果正常，但在第二个中它不是。我不明白为什么。它也会对链接产生影响......

请帮忙

Answer 1

在第二个示例中，您定位.aa而不是.link。 .aa是.link的孩子，.popup是.link的下一个兄弟。 +选择器选择下一个兄弟。 .popup不是.aa的下一个兄弟，这就是您应该使用.link:hover+.popup作为选择器的原因：

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

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

1 个答案: