背景颜色改变：悬停 [英] Background Color change on a:hover

问题描述

所以我基本上想要用div创建一个导航，并使其每行（id）都会翻转不同的颜色。

我尝试过很多不同的方式，我相信我正确地使用ID。

 < div class = navcontainer > 
< div id =1>< a href =＃>主页< / a>< / div> 
< div id =2>< a href =＃> work< / a>< / div> 
< div id =3>< a href =＃> resume< / a>< / div> 
< div id =4>< a href =＃>大约< / a>< / div> 
< div id =5>< a href =＃>链接< / 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; 
明确：两者; 
颜色：白色; 
 text-decoration：none 
} 
 .navcontainer＃1 a：hover {
 color：black; 
背景颜色：红色; 
} 
 .navcontainer＃2 a：hover {
 color：black; 
背景颜色：橙色; 
} 
  

解决方案

永远不要启动 ID & Class ，其中数字（1,2,3，）数字。这样写：

 ＃nav1，＃nav2 ... 
  

$ b HTML

 < div类= navcontainer > 
< div id =nav1>< a href =＃>主页< / a>< / div> 
< div id =nav2>< a href =＃> work< / a>< / div> 
< div id =nav3>< a href =＃> resume< / a>< / div> 
< div id =nav4>< a href =＃>约< / a>< / div> 
< div id =nav5>< a href =＃>链接< / a>< / div> 
< / div> 
  

So I basically want to take a navigation i created with div's and make it so that each line (id) will rollover a different color.

I've tried a ton of different ways of doing it and I'm getting stuck with using the ID correctly I believe.

<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>

And the 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;
}

解决方案

Never start ID & Class with numerical (1,2,3,) digit. Write like this:

#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>

这篇关于背景颜色改变：悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！