背景颜色改变:悬停 [英] 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屋!
查看全文