嘿伙计这是我到目前为止在网站上的第二个问题,我正在为我的老板重新设计。我正在尝试使用它,如果用户将鼠标悬停在“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&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>
答案 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;
}