Reputation: 3751

How to set different hover color for each link

I have the following DIV:

<div id="second-menu-navi" class="navi">
            <a href="" id="tab-1">Why Choose Us</a>
            <a href="" id="tab-2">Physicians</a>
            <a href="" id="tab-3">Medical Specialties</a>
            <a href="" id="tab-4">Locations</a>
            <a href="" id="tab-5">Urgent Care</a>
            <a href="" id="tab-6">Radiology</a>
            <a href="" id="tab-7">Lab</a>
        </div>
</div>

And the following CSS which changes the background color when hovered over:

#second-menu-navi a:hover, #second-menu-navi a.active {
    background-color:#155E9B;
}

I was trying to change each tab to have a different hover color by adding the following CSS:

#second-menu-navi #tab-1 a.active, #second-menu-navi #tab-1 a.hover {
    background-color: #155E9B;
}
#tab-2 a.active, #tab-2 a.hover {
    background-color: #159B77;
}
#tab-3 a.active, #tab-3 a.hover {
    background-color: #1E9B15;
}
#tab-4 a.active, #tab-4 a.hover {
    background-color: #969B15;
}
#tab-5 a.active, #tab-5 a.hover {
    background-color: #9B2B15;
}
#tab-6 a.active, #tab-6 a.hover {
    background-color: #9B1574;
}
#tab-7 a.active, #tab-7 a.hover {
    background-color: #70159B;
}

But none of the link changes background color when hovered. Please help me fix the issue.

Upvotes: 0

Answers (5)

ryanwinchester

Reputation: 12137

TLDR;

DEMO: CodePen

You want to use the CSS Pseudo class: :hover

a#tab-2:active,
a#tab-2:hover {
    background-color: #159B77;
}

There are good resources out there for things like this.

Pseudo classes on MDN:

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

Pseudo-classes, together with pseudo-elements, let you apply a style to an element not only in relation to the content of the document tree, but also in relation to external factors like the history of the navigator (:visited, for example), the status of its content (like :checked on some form elements), or the position of the mouse (like :hover which lets you know if the mouse is over an element or not).

Syntax:

selector:pseudo-class {
  property: value;
}

So in your case, it would be:

a#tab-2:active,
a#tab-2:hover {
    background-color: #159B77;
}

More on :hover from MDN:

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :hover rule after the :link and :visited rules but before the :active one, as defined by the LVHA-order: :link — :visited — :hover — :active.

Visual user agents, like Firefox, Internet Explorer, Safari, Opera or Chrome, apply the associated style when the cursor (mouse pointer) hovers over an element.

Upvotes: 1

Kheema Pandey

Reputation: 10265

This way you can change the color for each link on mouse hover. Here is the working Demo.

a#tab-1:hover {
    color:aqua;
}
a#tab-2:hover {
    color:red;
}
a#tab-3:hover {
    color:green;
}
a#tab-4:hover {
    color:gray;
}
a#tab-5:hover {
    color:yellow;
}
a#tab-6:hover {
    color:gold;
}
a#tab-7:hover {
    color:blue;
}

you can make a background image transparent. Here is the Demo.

#container {
   position: relative;
}
#container:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://lorempixel.com/300/300); 
    width: 300px;
    height: 300px;
    opacity : 0.5;
-moz-opacity:0.5;
filter: alpha(opacity=50);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*IE8*/
}

If using RGBA property. all modern browser supported it. However to work in IE8 or lower its required to use filter.

/* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

Upvotes: 2