CSS 悬停在导航栏上不起作用

Question

大家好，这是我迄今为止在为老板重新设计的网站上提出的第二个问题。我正在尝试在用户将鼠标悬停在“4 色胶印”上时 div ID 的背景将更改为另一种背景颜色。（例如蓝色）。我试过添加 #4_color_offset_printing:hover 看看是否会简单地改变背景颜色。这通常有效，但在此导航栏上似乎无效。现在默认背景是绿色的。当我将鼠标悬停在它上面时，我希望它变成蓝色。我正在尝试将这种影响应用到每个 link 但如果我能让一个工作，我就能弄清楚其余的。

导航栏的旧样式是带有蓝色 link 悬停效果的灰色。设计网站的最后一位开发人员决定使用内联 CSS。我不是内联的粉丝，但即使我尝试简单地将他的内联代码复制并粘贴到 main.css 它也不会生效。我不知道为什么会这样。如果有人有任何建议，那就太好了！

这是我的Demo

<style type="text/css"></style></head>

<body class="desktop webkit webkit_525">
    <div id="header">
        <div class="content_width rel">
            <a href="./Welcome to our site!_files/Welcome to our site!.html">
                <div id="header_logo"></div>
            </a>                

            <ul id="top_nav">
                <li><a class="home_icon" href="./Welcome to our site!_files/Welcome to our site!.html">Home</a></li>
                <li><a href="http://www.offsetprinting.com/account/contact">Contact</a></li>
                <li><a href="https://secure.offsetprinting.com/account/estimate">Estimates</a></li>
                <li><a href="http://www.offsetprinting.com/helpcenter">Help Center</a></li>
                <li><a href="https://secure.offsetprinting.com/services/samples">Samples</a></li>
                <li><a href="https://secure.offsetprinting.com/account/summary">Shopping Cart</a></li>
                <li class="last-child"><a href="https://secure.offsetprinting.com/account/dashboard">My Account</a></li>
            </ul>

                            <ul id="loginbar" class="rounded">
                <li><a href="https://secure.offsetprinting.com/account/signup">New Account</a></li>
                <li class="last-child"><a href="https://secure.offsetprinting.com/account/login">Login</a></li>
            </ul>

            <div id="header_products"></div>                
                            <div id="header_phone">Customer Service: (949) 215-9060</div>               

            <div id="product_search">
                <input id="product_ti" class="default" type="text" value="Find A Product">
                <input id="product_btn" type="button" value="Search">
                <input id="product_default" type="hidden" value="Find A Product">
            </div>      
        </div>
    </div>

    <div id="nav">
        <ul id="nav_links" class="content_width_adjust">

            <li id="4_color_offset_printing" style="width:183px; height:44px; background-color:#0C0; border-top: 4px solid #009ad6; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;box-sizing: border-box;" class=""><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>

            <li id="large_format" style="width:139px" class=""><a class="nav_parent wide" href=""><span>Large Format</span></a></li>

            <li id="1-2_color_printing" style="width:164px"><a class="nav_parent" href=""><span>1&amp;2 Color Printing</span></a></li>

            <li id="4_color_digital_printing" style="width:189px"><a class="nav_parent narrow" href=""><span>4-Color Digital Printing</span></a></li>

            <li id="roll_labels" style="width:130px" class=""><a class="nav_parent wide" href=""><span>Roll Labels</span></a></li>

            <li id="services" class="last " style="width:133px"><a class="nav_parent services" href=""><span>Services</span></a></li>

        </ul>
    </div>

Answer 1

需要添加到#nav_links里a:hoverclass

#nav_links li a:hover
{
    background-color: blue;
}

https://jsfiddle.net/akdz7udj/7/

Answer 2

元素 ID 不能以数字开头，只有类可以。从“4_color_offset_printing”中删除 4_，这样您就只有 'color_offset_printing' 的 ID 将允许您在 CSS.

中定位它

如果您真的不想更改您的 ID，您可以定位以数字开头的 ID，如下所示：

[id='4_color_offset_printing'] {
background: blue;
}

但我不推荐使用它，它可能不适用于所有浏览器。最好以正确的方式做事，不要使用数字作为 ID 的开头。

CSS 悬停在导航栏上不起作用

CSS Hover will not work on Navigation Bar

html

css

layout