我一直在尝试为我正在制作的网站创建一个导航栏,我希望每个按钮在突出显示时显示不同的颜色.我曾经习惯<ul>创建导航栏.问题是,有没有办法使用"a:hover {background:#;}"作为特定元素的内联CSS?
我尝试过给每个<li>或者<a>一个id,然后在内部样式表中创建对它们的引用,但是无法让它工作.以下是我到目前为止的情况;
#menu {height:37px;display:block;margin:20px auto;border:1px solid;border-radius:5px;margin-left:30px;max-width:550px}
#menu ul {margin:0;padding:0;}
#menu li {float:left;display:block;min-width:110px}
#menu a {display:block;padding:12px;font:bold 13px/100% Arial, Helvetica, sans-serif;text-align:center;text-decoration:none;text-shadow:2px 2px 0 rgba(0,0,0, 0.8); background-color:#5A8A41;border-right:1px solid #1b313d; color:#fff;}
#menu a:hover {background:#5D80B0;}
...
<div id='menu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'>XML</a></li>
<li><a href='#'>SQL</a></li>
<li><a href='#'>Java</a></li>
<li><a href='#'>C#</a></li>
</ul>
</div>
Run Code Online (Sandbox Code Playgroud)
正如你所知,我已经使用了html和CSS一整个星期.如果这是一个愚蠢的问题,我很抱歉.谢谢.
那是完全不可能的; 抱歉.
相反,您可以为每种颜色创建一个CSS类,并将适当的类应用于每个链接:
#menu a.red:hover { background: red; }
Run Code Online (Sandbox Code Playgroud)