CSS a:hover inline?

Question

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.

If your are new in HTML/CSS, I ll recommend you to take a look at Bootstrap here: http://twitter.github.io/bootstrap/ — F__M, May 27 '13 at 16:58
`#menu a:after { border-color:#6696bd; }` Won't work `a:after` has no size no border width and you are trying to add `border-color`, which doesn't make sense — Sourabh, May 27 '13 at 17:00
Yea, not sure why that's in there... I think I added it in "trail and error" style whilst playing around and never removed it. Probably best I take that out. Thanks. — Rudi Kershaw, May 27 '13 at 17:04
Possible duplicate of [How to write a:hover in inline CSS?](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) — bgmCoder, Oct 22 '15 at 16:50

score 5 · Accepted Answer · answered May 27 '13 at 16:55

5

That's completely impossible; sorry.

Instead, you can create a CSS class for each color and apply the appropriate class to each link:

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

answered May 27 '13 at 16:55

SLaks

868,454
176
1,908
1,964

Thank you. How would that look in the local html? (ie, what would the class reference looks like on the element?) Sorry again for daft questions. – Rudi Kershaw May 27 '13 at 17:03
@RudiKershaw: `class="red"` – SLaks May 27 '13 at 17:09

score 3 · Answer 2 · answered May 27 '13 at 17:19

If you use :nth-child(X) pseudo class, you can do this without adding a class to every new li you add. For this, I had to move the background-color to li and also added a few other CSS properties, nothing much.

This will be your CSS for adding color:

#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

score 2 · Answer 3 · answered May 27 '13 at 17:04

2

You could achieve this with jquery :)

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

answered May 27 '13 at 17:04

Nabil Ghulam

201
1
3
12

1

Seems overkill, especially for someone who's only been at this for a week. – BoltClock May 27 '13 at 17:07
Oh, didn't notice the last part. But still it's an alternative, he doesn't have to use it. I know it were impossible for me aswell to implement jquery at start. Best luck anyways. – Nabil Ghulam May 27 '13 at 17:08
I know there are some instances where using style sheets is impossible so this is definitely some useful info. Thank you. Although I will probably give JavaScript a miss for a little while yet. – Rudi Kershaw May 27 '13 at 17:13
You will get into it, just focus on the html and css part for a while then give other languages a go. jQuery is one of the easier coding languages to learn and very useful. – Nabil Ghulam May 27 '13 at 17:17

davidcondrey · Answer 4 · 2014-10-15T07:39:01.660

Inline javascript

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

In a working draft of the CSS2 spec it was declared that you could use pseudo-classes inline like this:

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

but it was never implemented in the release of the spec as far as I know.

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

CSS a:hover inline?

4 Answers4