css - 当我将鼠标悬停在另一个 的 上时，显示来自不同 的

Question

我试图在悬停来自不同 ul 的另一个 li 时显示一个 li，但直到现在我才成功。你能帮我吗？谢谢 !

HTML

<div id="parent">
    <ul id="child1">
        <li id="child1a">bla bla</li>
        <li id="child1b">bla bla</li>
        <li id="child1c">bla bla</li>
        <li id="child1d">bla bla</li>
    </ul>
    <ul id="child2">
        <li id="child2a">bla bla</li>
        <li id="child2b">bla bla</li>
        <li id="child2c">bla bla</li>
        <li id="child2d">bla bla</li>
    </ul>
</div>

CSS

#child2a {display:none;}
#child1a:hover #child2a {display:block}

https://jsfiddle.net/t9y4wu61/

Answer 1

您需要的不仅仅是 CSS 来解决这个问题。但首先，您的方法包含一个逻辑错误:

#child1a:hover #child2a {display:block}

在选择器之间添加一个空格意味着它们嵌套在标记中。所以你的 CSS 可以很好地处理这样的事情:

<div id="parent">
    <ul id="child1">
        <li id="child1a">
            <span id="child2a">bla bla</span>
        </li>
    </ul>
</div>

当然，这不是你想要的。为了让事情正常进行，您将需要 JavaScript。我推荐jQuery为此:

$(document).ready(function() {
    $("#child1a").mouseover(function() {
        $("#child2a").show();
    };
    $("#child1a").mouseoout(function() {
        $("#child2a").hide();
    };
}

请注意，我没有测试此代码，因此它可能存在一些问题。但是，它可能会引导您进入正确的方向。请参阅链接的 jQuery 网站以获取引用和代码示例。