I've been struggling for the past two hours to figure out why a:hover won't work. It seems like something is overlaying it but I don't know what

HTML-CSS
#1

Here is both my HTML and CSS code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <meta name="description" content="This is just a test">
        <meta name="keywords" content="Just, a, test">
        <meta name="author" content="Me">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <link rel="shortcut icon" href="fav.png">
    </head>
    <body>
        <header id="main-header">
            <div class="container">
            <img width="150" height="150" src="image.png"/>
            <img width="700" height="150" src="backgroundimage.png"/>
            </div>
            <hr>
        </header>
        
        <nav id="navbar">
            <div class="container">
                <ul>
                    <li><a href="#"></a>Home</li>
                    <li><a href="#"></a>About</li>
                </ul>
            </div>
            <hr style="margin-top: 25px;">
        </nav>

        <div class="container">
        <section id="showcase">
            <h1>Welcome</h1>
            <p>to the</p>
            <h2>official</h2>
            <h3>test site</h3>
        </div>
        </section>

        <div class="container">
        <section id="main">
            <h1>Welcome!</h1>
            <p></p>
        </section>

        <aside id="sidebar">
            <p></p>
        </aside>
        </div>
        
    <footer id="main-footer">
        <p style="font-family:Verdana, Geneva, Tahoma, sans-serif">Me &copy; 2020. All rights reserved.</p>
    </footer>
    </body>
</html>

body {
    font-family: grobold;
    font-size: 12px;
    margin: 0;
    background-color: #333;
    background-image: url(background2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fff;
}

hr {
    border: 0;
    height: 3px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
    margin-top: -2px;
}

.container {
    overflow: hidden;
    margin:auto;
    width: 60%;
}

a {
    color: #fff;
    text-decoration:none; 
    font-style:inherit; 
    letter-spacing: 0.1em;
}


a:hover{
    color: green;
}

#main-header{
    padding: 30px;
    padding-bottom: 20px;
    margin-top: -30px;
}

#navbar {
    color: white;
}

#navbar ul {
    padding:0;
    list-style: none;
}

#navbar li {
    display: inline;
}

#navbar a {
    text-decoration: none;
    font-size: 20px;
    padding-right: 60px;
    padding-left: 40px;
    color:#fff;
}

#showcase {
    background-image: url("Login.png");
    background-position: center;
    background-repeat:no-repeat;
    min-height: 500px;
    margin-bottom: 30px;
    text-align: center;
}

#showcase h1 {
    color: green;
    font-size: 25px;
    line-height: 1.2em;
    padding-top: 170px;
}

#showcase p {
    font-size: 20px;
    color: green;
}

#showcase h2 {
    color: yellowgreen;
    font-size: 30px;
    line-height: 1.2em;
    text-decoration: underline;
}

#showcase h3 {
    color: green;
    font-size: 30px;
    line-height: 1.2em;
}

#main {
    float: left;
    width: 70%;
    padding: 0 30px;
    box-sizing: border-box;
}

#sidebar {
    float: right;
    width: 30%;
    background: darkgray;
    color: white;
    padding: 0 10px;
    box-sizing: border-box;
}

#main-footer {
    position:relative;
    color: #fff;
    text-align: center;
    padding: 20px;
    margin-top: 138px;
    font-size: 15px;
}

@media(max-width:600px){
    #main{
        float: none;
        width: 100%;
    }
}
#2

Hi @Dunoshi,

Welcome to the community.

Your closing </a> tags are before your “Home” and “About”. Instead, you want to move the tags after. Hope that helps.

#3 
<li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>

Hi, I think the hover is working only in the # and not in the content since you didn’t cover the home and about under<a> tag it will be functional if you CSS the <li> tag or move the hole home and about under <a>Home</a> <a>About</a>

#4

That didnt help sadly but thanks for trying

#5

Didn’t work but still thanks. I will try to rewrite everything from scratch

1 Like
#6

color is for text, if there is no text in the element it will not change color

#7

There is text as you can see I have added Home and About as text on the links

#8

this is one of them, it does not have any text inside

#9 
a:hover{
    color: #F00;
}

hover your color with same hex decimals used in a tag

#10

Still did not work but thanks for trying anyways. I bet there is some css code that keeps overlaying the link hover so in order to find it somebody would have to copy paste my code in his own project and fix that. I am still trying and nothing works

#11

That is pretty much the same way but with hex decimals

#12

So your issue is in your #navbar a{} section. You repeat the color #fff; that you have listed already in your a{} section. This is stopping the hover. Remove that and it will work for you.

#13

Wow you are a god! Thank you in advance!!