CODEWITHSUNDEEP
csshyperlink
Deepu
Deepu

Reputation: 81

No color change for text with Hyperlinks

I have written this style to change color of a div and text on mouseover. The problem occur at the texts with hyperlinks. Its coming perfect in Firefox and Chrome but its not working in IE. I am using version 10.

Need some help here...

This is the style...

<style type="text/css">
    .buttonstyle {
        height:30px;
        width:200px;
        background-color:#FFF;
        font-family:"Arial";
        font-weight:bold;
        color:#767676;
        cursor:pointer;
    }
    .buttonstyle:hover {
        background-color:#007DBA;
        font-family:"Arial";
        font-weight:bold;
        color:#FFF;
    }
</style>

HTML:

<div class="buttonstyle"><a href="#">Button</a></div>

Here is the JSFiddle

Upvotes: 0

Views: 540

Answers (4)

Don Zanurano
Don Zanurano

Reputation: 15

No color change for text with Hyperlinks, in the css or style: color:inherit;

Upvotes: 0

Bjorn Smeets
Bjorn Smeets

Reputation: 320

The problem is that only the color and the background of the div get changed on hover. To get the links to change color aswell, you need to say so in CSS. It might even be better to say that all child-elements of the div need to change color and background on hover. You can do it by using the below style:

.buttonstyle
{
    cursor: pointer;
    font-family: "Arial";
    font-weight: bold;
    height: 30px;
    width: 200px;
}

.buttonstyle *
{
    background-color: #FFFFFF;
    color: #767676;
}

/*
Or use ".buttonstyle:hover, .buttonstyle:hover a"
if it must only apply to links
*/
.buttonstyle:hover, .buttonstyle:hover * 
{
    background-color: #007DBA;
    color: #FFFFFF;
}

Check out this JSFiddle

Edit: I've changed the CSS a bit to make sure the link keeps the same look, even after having clicked on it. Also updated the JSFiddle.

Upvotes: 2

electrikmilk
electrikmilk

Reputation: 1043

Try this CSS:

.buttonstyle {
    background-color: #FFFFFF;
    color: #767676;
    cursor: pointer;
    font-family: "Arial";
    font-weight: bold;
    height: 30px;
    width: 200px;
}
.buttonstyle a {
color: #fff;
}
.buttonstyle a:hover {
color: #fff;
}
.buttonstyle a:active {
color: #fff;
}
.buttonstyle a:visited {
color: #fff;
}

Upvotes: 0

CaribouCode
CaribouCode

Reputation: 14398

Difficult to see exactly what the issue is without seeing a fiddle or the HTML, but if you're issue is that links inside .buttonstyle aren't changing color, you can specify them like this:

.buttonstyle:hover a { color:#FFF; }

Upvotes: 0

Related Questions