Hover (Change colour of RollOver)

It goes without saying that HOVER has no effect on touch screen devices which the majority of site visitors are using these days. So more than half of users will probably never see the a:hover effect. 

Experienced developers would NEVER waste precious heading tags on navigation.  <h1> headings are intended for the most important keywords on your page.  That's usually your site or business name, not navigation links.  Also <h1> is rarely if ever used more than 1 x per page.

The way you structure content in the markup is ranked by search engines.  And since search engines drive traffic to your site, you want to get this right the first time. Google's SEO starter guide is a MUST READ for anyone new to building web sites.

https://developers.google.com/search/docs/beginner/seo-starter-guide

Below is a quick code example to get you started in the right direction.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ben's Awesome Portfolio ~ since 2021 </title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* { box-sizing: border-box; }
body {
width: 96%;
margin: 0 auto;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
background: #222;
color: antiquewhite;
/**scale fonts to fit any size screen**/
font-size: calc(14px + 1vw);
line-height: calc(1.2em + 1.5vw);
}
header img {
vertical-align: baseline;
margin: 0 auto;
max-width: 100%;
}
nav li {
list-style-type: none;
text-align: right;
font-size: 1.75rem;
text-transform: uppercase;
letter-spacing: 0.16rem;
line-height: 1;
}
nav li a {
color: #FFF;
font-weight: bold;
text-decoration: none;
}
nav li a:hover, 
nav li a:active, 
nav li a:focus {
color: yellow;
text-decoration: underline;
}
</style>
</head>

<body>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<h1>Ben's Awesome Portfolio</h1>
<h2>Home Page</h2>
<img src="https://dummyimage.com/1200x400" alt="placeholder">
</header>
<main>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
<hr>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
<hr>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam magnam, praesentium asperiores. Et temporibus facilis, vel aliquam nostrum nam distinctio iure nisi consequuntur minus ea explicabo voluptate quo debitis. Fugiat!</p>
</main>
<hr>
<footer>
<p>© 2021 all rights reserved by XYZ Website</p>
</footer>
</body>
</html>

Just add the below to your css styles, insert between the css <style> </style> block.

a:hover {

color: yellow;

}

This will turn every link on your page yellow on hover.

If you only want a set of specific links in a specific <div> to turn yellow on hover you would target only that div:

.myDivName a:hover {

color: yellow;

}