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

Question

我试图在悬停来自不同 ul 的另一个 li 时显示一个 li，但我没有成功，直到 now.Can 你帮助我？谢谢！

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}

在选择器之间添加 space 意味着它们嵌套在标记中。所以你的 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 网站以获取参考和代码示例。

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

Display a <li> from a different <ul> when I hover on a <li> from another <ul>

css

hover

html-lists