所以我基本上想要使用div创建的导航并使其成为每条线(id)翻转不同的颜色。
我已经尝试了很多不同的方法,我相信我正在坚持使用ID。
<div class="navcontainer">
<div id="1"><a href="#">home</a></div>
<div id="2"><a href="#">work</a></div>
<div id="3"><a href="#">resume</a></div>
<div id="4"><a href="#">about</a></div>
<div id="5"><a href="#">links</a></div>
</div>
和CSS
.navcontainer {
font-family: Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
}
.navcontainer div a {
background-color:black;
margin:2px;
padding:2px;
display:inline;
float:left;
clear:both;
color:white;
text-decoration:none
}
.navcontainer #1 a:hover {
color:black;
background-color:red;
}
.navcontainer #2 a:hover {
color:black;
background-color:orange;
}
答案 0 :(得分:5)
永远不要启动 ID &amp;带有numerical
(1,2,3,)数字的类。写得像这样:
#nav1,#nav2...
<强> HTML 强>
<div class="navcontainer">
<div id="nav1"><a href="#">home</a></div>
<div id="nav2"><a href="#">work</a></div>
<div id="nav3"><a href="#">resume</a></div>
<div id="nav4"><a href="#">about</a></div>
<div id="nav5"><a href="#">links</a></div>
</div>
答案 1 :(得分:1)
将您的ID名称更改为不是以数字开头的字母..
IE:
.navcontainer #one a:hover {
color:black;
background-color:red;
}
<div class="navcontainer">
<div id="one"><a href="#">home</a></div>
<div id="2"><a href="#">work</a></div>
<div id="3"><a href="#">resume</a></div>
<div id="4"><a href="#">about</a></div>
<div id="5"><a href="#">links</a></div>
</div>