Question

尝试进行多级悬停，因此我的代码背后的前提是将鼠标悬停在显示iPod和iPhone的Linea Pro 4上，然后将鼠标悬停在显示不同类型产品的iPod或iPhone上，然后将鼠标悬停在类型上显示部件号的产品。

我已经尝试了几种CSS变体来让它工作......而且我知道我还有很长的路要走，所以任何开始的帮助都会受到赞赏......这是我的CSS后跟我的HTML代码

CSS CODE

#ipc_cases ul {list-style-type: none; display: inline-block;}
#ipc_cases ul li > ul{display:none; background: rgb(213, 213, 213)}
#ipc_cases ul li ul li > ul {display:none;}
#ipc_cases li:hover > ul{display: inline-block;}

HTML CODE

<div id="ipc_cases">
    <ul>
    <li><a>Linea Pro 4</a>
        <ul>
            <li>iPod
                <ul><li>Rugged Case for LP4-POD4 (iPod) GRAY/BLACK, 1D Scanner No MSR
                         <ul><li>CS-R-LP4-POD4-G/BK</li></ul>
                    </li>
                    <li>Rugged Case for LP4-POD4 (iPod) GRAY/BLACK, 1D Scanner with MSR
                         <ul><li>CS-RMS-LP4-POD4-G/BK</li></ul>
                    </li>
                    <li>Rugged Case for LP4C2D-POD4 (iPod) GRAY/BLACK, 2D Scanner No MSR
                         <ul><li>CS-R-LP4C2D-POD4-G/BK</li></ul>
                    </li>
                    <li>Rugged Case for LP4C2D-POD4 (iPod) GRAY/BLACK, 2D Scanner with MSR
                         <ul><li>CS-RMS-LP4C2D-POD4-G/BK</li></ul>
                    </li>
                </ul>
            </li>

            <li>iPhone
                <ul><li>Rugged Case for LP4-PH4 (iPhone) GRAY/BLACK, 1D Scanner No MSR
                         <ul><li>CS-R-LP4-PH4-G/BK</li></ul>
                    </li>
                    <li>Rugged Case for LP4-PH4 (iPhone) GRAY/BLACK, 1D Scanner with MSR
                         <ul><li>CS-RMS-LP4-PH4-G/BK</li></ul>
                    </li>
                    <li>Rugged Case for LP4C2D-PH4 (iPhone) GRAY/BLACK, 2D Scanner No MSR
                         <ul><li>CS-R-LP4C2D-PH4-G/BK</li></ul>
                    </li>
                    <li>Rugged Case for LP4C2D-PH4 (iPhone) GRAY/BLACK, 2D Scanner with MSR
                         <ul><li>CS-RMS-LP4C2D-PH4-G/BK</li></ul>
                    </li>
                </ul>
            </li>

        </ul>
    </li>

    </ul>
    </div>

Answer 1

It should work如果您在最终选择器中的li:hover和ul之间使用child combinator，那么您希望的方式：

#ipc_cases li:hover > ul {
  display: block;
}

以前，在没有子组合子的情况下，li:hover ul正在扩展所有的后代，这就是当你在第一级徘徊时所有东西出现的原因。通过使用子组合子，每个悬停的li仅显示DOM中直接位于其下方的ul。

多级悬停CSS

1 个答案: