Question

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

我已经构建了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>删除徽标以保持布局清洁，则可以使用 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;以防万一光标在图像上发生了变化，但通常它没有，只是为了使它看起来不可点击。如果这有效，那么接受的回答是值得赞赏的。

如果您想完全从导航栏中删除徽标，则可以创建一个容器来容纳导航栏和徽标。然后根据您想要的徽标浮动元素。这可能不是最有效的方法，但应该有效。您也可以使用margin和padding调整排名。我在这里添加了一些其他的CSS只是为了说明..这是一个例子。

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

HTML5 NAV悬停例外

1 个答案: