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

Question

大家好，这是我到目前为止正在为老板重新设计的网站上的第二个问题。 我正在尝试使用它，如果用户将鼠标悬停在“四色胶印”上，则div ID的背景将更改为另一种背景色。 （示例为蓝色）。 我尝试添加＃4_color_offset_printing：hover来查看是否只是改变背景颜色。 这通常可以使用，但是在此导航栏上似乎无法使用。 现在，默认背景为绿色。 当我将鼠标悬停在上方时，它会变成蓝色。 我正在尝试将此影响应用于每个链接，但是如果我可以使用一个链接，我可以弄清楚其余的链接。

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

这是我的演示

<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

元素ID不能以数字开头，只有类可以。 从“ 4_color_offset_printing”中删除4_，以便仅获得ID为“ color_offset_printing”，即可在CSS中定位它。

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

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

但我不建议您使用它，它可能无法在所有浏览器中正常工作。 最好以正确的方式做事，不要使用数字来开头您的ID。

Answer 2

需要添加到#nav_links li a：hover类中

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

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

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

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-04-16 18:09:52

解决方案2
0 2015-04-16 18:06:58

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

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-04-16 18:09:52

解决方案2 0 2015-04-16 18:06:58

解决方案1
1 已采纳 2015-04-16 18:09:52

解决方案2
0 2015-04-16 18:06:58