Question

我一直在尝试为我正在制作的网站创建一个导航栏，我希望每个按钮在突出显示时显示不同的颜色。我使用<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>

正如你所知，我一直在使用html和CSS。如果这是一个愚蠢的问题，我很抱歉。感谢。

Answer 1

那是完全不可能的;遗憾。

相反，您可以为每种颜色创建一个CSS类，并将适当的类应用于每个链接：

#menu a.red:hover { background: red; }

Answer 2

如果您使用:nth-child(X)伪类，则无需为添加的每个新li添加类，即可执行此操作。为此，我不得不将background-color移到li并添加了一些其他CSS属性，没什么。

这将是您添加颜色的CSS：

#menu li:nth-child(1):hover { background: red; }
#menu li:nth-child(2):hover { background: blue; }
#menu li:nth-child(3):hover { background: purple; }
#menu li:nth-child(4):hover { background: yellow; }
#menu li:nth-child(5):hover { background: pink; }

DEMO

+ :nth-child

Answer 3

你可以用jquery实现这个：）

$(document).ready(function() {
    $('a').hover(function(){
        $(this).parent().css({background-color: 'yellow'});
    });
});

Answer 4

内联javascript

<a href='index.html' onmouseover='this.style.textDecoration="none"' onmouseout='this.style.textDecoration="underline"'>Click Me</a>

在working draft of the CSS2 spe c中声明你可以像这样使用伪内联类：

<a href="http://www.w3.org/Style/CSS"
   style="{color: blue; background: white}  /* a+=0 b+=0 c+=0 */
      :visited {color: green}           /* a+=0 b+=1 c+=0 */
      :hover {background: yellow}       /* a+=0 b+=1 c+=0 */
      :visited:hover {color: purple}    /* a+=0 b+=2 c+=0 */
     ">
</a>

但据我所知，它从未在规范发布中实现。

http://www.w3.org/TR/2002/WD-css-style-attr-20020515#pseudo-rules

CSS a：悬停内联？

4 个答案: