CSS Hover不适用于导航栏

时间:2015-04-16 17:53:24

标签: html css css3 layout

嘿伙计这是我到目前为止在网站上的第二个问题,我正在为我的老板重新设计。我正在尝试使用它,如果用户将鼠标悬停在“4色偏移打印”上,则div ID的背景将变为另一种背景颜色。 (蓝色示例)。我尝试添加#4_color_offset_printing:悬停以查看是否只是更改背景颜色。这通常有效,但在这个导航栏上似乎无法正常工作。现在默认背景为绿色。当我将鼠标悬停在它上面时,我希望它变成蓝色。我正试图将这种影响应用到每个链接,但如果我可以得到一个工作,我可以弄清楚其余的。

导航栏的旧样式是带有蓝色链接悬停影响的灰色。设计该网站的最后一位开发人员决定使用内联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>

2 个答案:

答案 0 :(得分:1)

元素ID不能以数字开头,只有类可以。从&#39; 4_color_offset_printing&#39;中删除4_所以你只需要一个&#39; color_offset_printing&#39;将允许您在CSS中定位它。

如果您真的不想更改自己的ID,可以定位以以下数字开头的ID:

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

但我不建议使用它,它可能无法在所有浏览器中正常使用。最好以正确的方式做事,而不是使用数字来启动您的身份证。

答案 1 :(得分:0)

需要添加到#nav_links li a:hover class

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

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