Question

我正试图展示一个李，当一个来自不同ul的另一个李徘徊，但我直到现在都没有成功。你能帮帮我吗？谢谢！

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来解决这个问题。但首先，您的方法存在逻辑错误：

fix()

在选择器之间添加空格意味着它们嵌套在标记中。所以你的CSS可以正常工作：

#child1a:hover #child2a {display:block}

但当然，这不是你想要的。要使工作正常，您将需要JavaScript。我建议jQuery：

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

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

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

1 个答案: