1

I have been trying to create a navigation bar for a website I am making, and I want each button to display a difference colour when highlighted. I have used <ul> to create the navigation bar. The question is, is there a way to use the "a:hover {background:#;}" as inline CSS on a specific element?

I have tried giving each <li> or <a> an id and then creating references to them in the internal style sheet, but can't get it to work. Below is what I have so far;

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

Just so your aware, I have been using html and CSS for all of 1 week. So I apologise if this is a stupid question. Thanks.

4

4 回答 4

5

那是完全不可能的；对不起。

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

#menu a.red:hover { background: red; }
于 2013-05-27T16:55:38.103 回答
3

如果你使用:nth-child(X)伪类，你可以做到这一点，而不用为li你添加的每个新添加一个类。为此，我不得不移动background-colortoli并添加了一些其他的 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; }

演示

+ :nth-child

于 2013-05-27T17:19:32.417 回答
2

你可以用 jquery 实现这一点:)

$(document).ready(function() {
    $('a').hover(function(){
        $(this).parent().css({background-color: 'yellow'});
    });
});
于 2013-05-27T17:04:34.333 回答
2

内联 JavaScript

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

在CSS2 规范的工作草案中，声明您可以像这样使用内联伪类：

<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

于 2014-10-15T07:14:56.373 回答