CODEWITHSUNDEEP
csshyperlinkhover
user3086732
user3086732

Reputation:

How to make link colour the same as parent div?

Is there a simple rule that can be written in CSS to make all links take the standard font colour selected in the div they are in, but when they are hovered to go blue and when they are clicked to not permanently change colour.

I only want them to light up when they are hovered on, otherwise remain the same, the only div this problem is occuring in is the one below.

.textundergrey {
    height: 140px;
    width: 950px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    font-family: "OpenSans Light", Arial, serif;
    font-size: 20px
}

Upvotes: 5

Views: 8338

Answers (4)

Bhushan wagh
Bhushan wagh

Reputation: 197

.parent_div a{
    color:red;
}
.parent_div a:hover{
    color:blue;
}

Upvotes: 1

laaposto
laaposto

Reputation: 12213

If you want the link to have the same color as the div you should use color:inherit; and to turn to blue when hover you should use :

a:hover{
    color:blue;
}

Also with this code links dont change color when clicked.

Try:

HTML:

<div id="yellow"><a href="#">Yellow</a></div>
<div id="red"><a href="#">Red</a></div>

CSS:

a{
    color:inherit;
}
a:hover{
    color:blue;
}
#yellow{
    color:yellow;
}

#red{
    color:red
}

DEMO

EDIT (from comments)

To remove underline just use text-decoration:none;

DEMO2

Upvotes: 11

jonode
jonode

Reputation: 797

To prevent them from changing color when they are hovered

a:hover{

}

To prevent them from changing color when clicked

a:active{

}

You can apply it globally with the code above or to that specific class:

.textundergrey a:active{

}

To color links in that specific class use:

.textundergrey a{
    color: black;
}

Upvotes: 1

Holt
Holt

Reputation: 37616

Use inherit property :

a {
    color: inherit !important ;
}

Upvotes: 2

Related Questions