How do I write a CSS for mouse hover

Question

Possible Duplicate:
How to use CSS hover inside html-tag?

<body>
   <div id="he">
      <div id="header">
         <div class="headertabs">
            <ul class="nav">
               <li class="divide">&nbsp;</li>
               <li class="tab"><a href="a.php">OVERVIEW1</a></li>
               <li class="divide">&nbsp;</li>
               <li class="tab"><a href="a.php">OVERVIEW2</a></li>
</body>

How do I write a css when I move the mouse (hover) on the overview1 and overview2 tabs it has to change its text color to green.

A simple google would of yielded these results : http://www.w3schools.com/cssref/sel_hover.asp http://www.quirksmode.org/css/hover.html — David, Sep 26 '12 at 08:46
What do you mean "it has to change its color to green"? Is that the background, the text colour, borders... Question is unclear as to what you want to achieve, as well Googling CSS Hover would of helped massively. — Aran, Sep 26 '12 at 08:47

Kyle · Accepted Answer · 2016-12-13T15:55:52.330

4

Simnply use the :hover pseudo selector:

li.tab a:hover
{
   color: green
}

http://jsfiddle.net/Kyle_/duj2d/

edited Dec 13 '16 at 15:55

answered Sep 26 '12 at 08:45

Kyle

65,599
28
144
152

score 1 · Answer 2 · answered Sep 26 '12 at 08:46

I snagged a bit of CSS from a file I have open that should explain it quite well:

This is my normal CSS for an anchor:

a
{
    color: #006699;
    text-decoration: underline;
}

This is the bit that changes the color when it is hovered over.

a:hover
{
    text-decoration: none;
}

score 0 · Answer 3 · answered Sep 26 '12 at 08:47

0

I'd put the hover on the <a> instead for better IE support, I'd also change the colour for focus so it changes for keyboard only users when tabbing through links, so:

.tab a:hover, .tab a:focus {
  color: green
}

answered Sep 26 '12 at 08:47

Probocop

10,346
28
85
115

score 0 · Answer 4 · answered Sep 26 '12 at 08:52

0

Another way

li a:hover{
 color:green;
}

answered Sep 26 '12 at 08:52

Afshin

4,197
3
25
34

score 0 · Answer 5 · answered Sep 26 '12 at 11:06

0

little shorter:

    .tab a:hover{color:green}

answered Sep 26 '12 at 11:06

kad

179
1
2
10

How do I write a CSS for mouse hover

5 Answers5