change h1 hover color only for links
13,544
Solution 1
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>
Solution 2
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
Author by
DavidM
Updated on June 04, 2022Comments
-
DavidM almost 2 years
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; }