CODEWITHSUNDEEP
csshyperlinkcolorshover
DavidM
DavidM

Reputation: 307

change h1 hover color only for links

I'm trying to figure out how to change the hover color, but only when the text has a link

This is the css code, but it changes color with or without links

h1, h2, h3, h4 {
color:#3F3F3F;
}

h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}

Upvotes: 2

Views: 15943

Answers (3)

Shibu Thomas
Shibu Thomas

Reputation: 3196

Sample: 

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
   color:grey;
}

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115374

This will depend on how you have structured the links.

There are two basic varieties.

a) Links inside headings. In which case:

a {
  color: red;
  text-decoration: none;
}
h1 a:hover {
  color: blue;
}
<h1><a href="#">Link Inside Heading</a></h1>

b) Headings inside links. In which event:

a {
  color: red;
  text-decoration: none;
  border: 1px solid grey;
  display: inline-block;
}
a:hover {
  color: green;
}
/* or */

h1 {
  background: #c0ffee;
}
a h1:hover {
  color: pink;
}
<a href="#"><h1>Heading Inside Link</h1></a>

Upvotes: 3

Vancold.at
Vancold.at

Reputation: 138

The anwser you are looking for is simple:

h1 a:hover, h2 a:hover, ect {
    color:#000000;
}

You stated that the header when hovered should change color, which is not what you want. Now it says that a header which contains a link (a) should change color when it is hovered. ;)

Upvotes: 0

Related Questions