Question

我有导航。当我悬停一些元素时，子菜单应显示为“阻止”，但这不起作用。参见：

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="generator" content="Notepad++" />
    <meta name="author" content="Erick Ribeiro" />
    <meta http-equiv="refresh" content="60" />
    <title>Mozilla Firefox</title>
    <style type="text/css">
        *{
            font-family: calibri;
        }
        #menu
        {
            float: left;
        }
        .submenu
        {
            margin-top: 26px;
            padding: 10px;
            border: solid 1px rgb(224, 224, 224);
            background: rgb(254, 254, 254);
            color: rgb(0, 128, 224);
            border-radius: 0 0 4px 4px;
        }
        #menuHome:hover ~ #submenuControle
        {
            display: block;
            opacity: 0;
            color: red;
        }
        #submenuHome
        {
            display: none;
            opacity: 0;
        }
        #submenuControle
        {
            display: block;
            opacity: 1;
        }
        #submenuGestão
        {
            display: none;
            opacity: 0;
        }
        #submenuRL
        {
            display: none;
            opacity: 0;
        }
        #submenuSI
        {
            display: none;
            opacity: 0;
        }
        ul
        {
            float: left;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }
        li
        {
            display: inline;
            float:left;
        }

        .primeiroItem
        {
            border: solid rgb(224, 224, 224);
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-radius: 4px 0 0 4px;
        }
        .naoPrimeiroItem
        {
            border: solid rgb(224, 224, 224);
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 0;
        }
        .ultimoItem
        {
            border: solid rgb(224, 224, 224);
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 0;
            border-radius: 0 4px 4px 0;
        }
        a
        {
            text-decoration:none;
            padding: 8px;
            border: solid 1px;
            color: rgb(0, 0, 0);
            background: rgb(240,240, 240);
        }
        a:visited
        {
            color: rgb(0, 0, 0);
        }
    </style>
    <script type="text/javascript">

    </script>
</head>
<body>
    <nav id="menu">
        <ul>
            <li><a id="menuHome" class="primeiroItem" href="#">Home</a></li>
            <li><a id="menuControle" class="naoPrimeiroItem" href="#">Controle</a></li>
            <li><a id="menuGestao" class="naoPrimeiroItem" href="#">Gestão</a></li>
            <li><a id="menuRL" class="naoPrimeiroItem" href="#">Relatórios e Listas</a></li>
            <li><a id="menuSI" class="ultimoItem" href="#">Sistema Informação</a></li>
        </ul>
        <div id="submenuHome" class="submenu">
        </div>
        <div id="submenuControle" class="submenu">
            BSC
            Comunicação
            Treinamento
            Documentos
            Controle de Acesso
        </div>
        <div id="submenuGestão" class="submenu">
            ASV
            Treinamento
            Suprimentos
            Chamados</div>
        <div id="submenuRL" class="submenu">
            Listas
            Relatórios
        </div>
        <div id="submenuSI" class="submenu">
        </div>
    </nav>
</body>
</html>

Answer 1

问题是，您正在使用兄弟选择器来选择不是兄弟的项目。您的代码#menuHome:hover ~ #submenuControle表示“当我悬停#menuHome时，选择id为submenuControle的兄弟”

但是在你的代码中#menuHome没有任何兄弟姐妹。

CSS不允许你向后遍历，所以如果你需要子菜单在悬停menuHome时应用样式你有2个选项。

更改布局
使用javascript。

如果我理解您的代码，您正在尝试制作悬停菜单，因此我建议更改布局。

编辑：对您的代码进行了一些快速更改，添加了悬停菜单（我相信这就是您所追求的）。您可以根据自己的需要更改样式和诸如此类的东西。 http://jsfiddle.net/xHKKQ

为什么我的：悬停不起作用？

1 个答案: