Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change anchor color when you hover over a list

Tags:

css

hover

I have a following HTML and CSS.

When I hover over a list, I want to change the background color and font color. However my style does not change when I hover over padding of list, on the border or near a border inside the list.

http://jsfiddle.net/Hbf9D/1/

How can I do it?

#nav li{
    display: inline;
    text-align: center;
    list-style-type:none;
    background-color:#1A365B;
    margin: 0 6px 0 0;
    padding: 2px 11px 4px 11px;

    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

#nav li:hover{
    background-color:#E0F1EA;
    border: 2px solid #000;
    color: #000000;
    padding: 0 9px 2px 9px;
}

#nav li a:hover{
    color: #000000;
}

#nav li a{
    text-decoration: none;
    color: #ffffff;
    font-weight:bold;
    font-family: 'CantarellBold', Arial, sans-serif;
    text-transform: capitalize;
    font-size: 12px;
}

<ul id="nav" class="grid_16">
    <li><a href="#">FORSIDE</a></li>
    <li><a href="#">MOBIL</a></li>
    <li><a href="#">PC OG SERVERE</a></li>
    <li><a href="#">TJENESTER</a></li>
</ul>
like image 557
shin Avatar asked Dec 05 '10 10:12

shin


People also ask

How do you change color on anchor?

Log into your Anchor account on the web. Click on 'Settings' at the top right of your screen. From the drop down menu, click 'Update settings' Scroll down to 'Profile color (hex code)'

How do I change the color of my mouseover in HTML?

If you want to change the link color when moving the mouse over a link, you only need the A:hover line. hover - The hover option is the color that the text changes to when the mouse is over the link. In this example, the link changes to a blue color when a mouse cursor is hovering over a link.

How do I change the color of hover in Wordpress?

To change the hover color, please go to your Admin Dashboard>>Appearance>>Customize>>Additional CSS. In the Additional CSS, please copy and paste this CSS. In above, pink color is used. You can prefer any color as per your wish.

How do I change the background color of an anchor tag?

To set the background color in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <body> tag, with the CSS property background-color. HTML5 do not support the <body> tag bgcolor attribute, so the CSS style is used to add background color.


1 Answers

try following:

#nav li:hover a{
    color: #000000;
}

http://jsfiddle.net/zainshaikh/Hbf9D/3/

like image 52
Zain Shaikh Avatar answered Sep 21 '22 08:09

Zain Shaikh