HTML5 NAV 悬停异常

Question

我只想要屏幕顶部的导航栏，第一个列表项是不可点击的非悬停图像。

我已经构建了 NAV 并且悬停工作，但我似乎无法从悬停中排除第一个列表项图像。

有没有办法做到这一点？

CSS:

nav {
   background-color: #808080;
   border: 1px solid #dedede;
   border-radius: 4px;
   box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
   color: #888;
   display: block;
   overflow: hidden;
   width: 100%;
}

nav > ul > li:hover {
   background-color: rgb( 40, 44, 47 );
}

nav > ul > li:hover > a {
   color: rgb( 255, 255, 255 );
}

nav > ul > li:hover > a > .caret {
   border-top-color: rgb( 255, 255, 255 );
}

nav > ul > li:hover > div {
   display: block;
   opacity: 1;
   visibility: visible;
}

nav > ul > li > div ul > li:hover > a {
   background-color: rgba( 255, 255, 255, 0.1);
}

HTML:

<nav>
            <ul>
                <li>
                    <img src="img\logo.png" />
                </li>
                <li>
                    <a href="products.html">Menu 1 <span class="caret"></span></a>
                    <div>
                        <ul>
                            <li><a href="products.html#chair">SubMenu 1a</a></li>
                            <li><a href="products.html#table">SubMenu 1b</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="about.html">Menu 2 <span class="caret"></span></a>
                    <div>
                        <ul>
                            <li><a href="products.html#chair">SubMenu 2a</a></li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="help.html">Menu 3 <span class="caret"></span></a>
                    <div>
                        <ul>
                            <li><a href="products.html#chair">SubMenu 3a</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </nav>

Answer 1

如果您不想从第一个 <li> 中删除 Logo 为了保持布局整洁，您可以使用 nth-child选择所有 <li>的单独并给那些伪选择器。但是，它可能会添加相当多的额外代码。

ul li:hover:nth-child(1) {
<!-- Leave empty if you don't want any hover effect, this would be your logo -->
cursor: default;
    }
ul li:hover:nth-child(2) {
color: rgb( 255, 255, 255 ); <! -- Add the hover effects -->

    }
ul li:hover:nth-child(3) {
color: rgb( 255, 255, 255 );
    }

还有你的a标签。

ul li a:hover:nth-child(1) {
<!-- Leave empty -->
cursor: default;
}
ul li a:hover:nth-child(2) {
color: rgb( 255, 255, 255 ); <! -- Add the hover effects you want on the rest of the li's -->

    }
ul li a:hover:nth-child(3) {
color: rgb( 255, 255, 255 );
    }

查看 how nth-child works如果您想更深入地了解其功能。我添加了 cursor: default;以防光标在图像上发生变化，但通常不会，只是为了让它看起来不可点击。如果这有效，我们将不胜感激。

如果您想从导航栏中完全删除 Logo ，那么您可以创建一个容器来容纳您的导航栏和 Logo 。然后根据您想要 Logo 的位置 float 元素。这可能不是最有效的方法，但它应该有效。您可以使用 margin 调整位置和 padding以及。我在这里添加了一些其他的 css 只是为了说明。这是一个例子。

http://jsfiddle.net/kvyxLcbg/1/