当我将鼠标悬停在来自另一个 <ul> 的 <li> 上时，显示来自另一个 <ul> 的 <li>

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 网站以获取参考和代码示例。