0

尝试进行多级悬停，所以我的代码背后的前提是将鼠标悬停在显示 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>
4

1 回答 1

0

如果您在最终选择器的and之间使用子组合器，它应该按照您想要的方式工作：li:hoverul

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

以前，在没有子组合器的情况下，li:hover ul会扩展所有后代，这就是当您将鼠标悬停在第一级时会显示所有内容的原因。通过使用子组合器，每个悬停li只显示ulDOM 中它正下方的 s。

于 2013-09-10T21:23:24.867 回答