Question 44109 in Html Question posted in
Some basic documentation can be found here.

My hover is not working despite doing almost the same line of code from my other website – Html

So basically, I want to have a hover effect on my links. My past websites has their :hover working but this time it does not. I don’t know what broke on my code but this is how I usually set them up. I try the web inspector in order to add the effect with the same line of code and it worked. Please help.

my HTML


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clay Romero</title>
    <link rel="stylesheet" type="text/css" href="./main.css"/>
</head>


<body>
    <header>
        <nav>
            <h1>Author Name</h1>

            <ul>
                <li><a class="active" href="#">Home</a></li>
                <li><a class="" href="#">Books</a></li>
                <li><a class="" href="#">About</a></li>
                <li><a class="" href="#">Contact</a></li>
            </ul>
        </nav>
        <div class="grid-container">
            <img src="./images/newBook.png" alt="Book Model"/>
            <h2 class="book-title">BOOK TITLE</h2>
            <h4 class="sub-text">My new book, <i>"This is A Book Title"</i> has just been released</h4> 

        </div>
    </header>

<main>

</main>

</body>
</html>

and my CSS

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@800&display=swap");
* {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
  overflow: hidden;
}

header {
  position: relative;
  background-image: url("./images/Background-Asset.jpg");
  background-size: cover;
  height: 80vh;
  width: 100%;
}
header nav {
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: transparent;
  z-index: 99;
}
header nav h1 {
  font-family: "Bodoni Moda", serif;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  font-size: 3rem;
  padding-left: 2rem;
  cursor: pointer;
}
header nav ul {
  display: flex;
  list-style: none;
  padding-right: 4rem;
  padding-top: 2rem;
}
header nav ul li {
  padding: 0 3rem;
}
header nav ul li a {
  display: inline;
  text-decoration: none;
  color: white;
  font-size: 1.9rem;
}
header nav ul li a a:hover {
  border-bottom: 2px solid white;
}

.active {
  border-bottom: 2px solid white;
}

I tried everything from putting it on an inline or block display or even making chnaging z-index, Nothing worked. And I even tried putting the hover effect on the logo and it didnt work too.

Tags:

4

Answers


  1. 0

    I think double "a" was the reason in your CSS code.
    Can you try like the following?

    header nav ul li a:hover {
  border-bottom: 2px solid white;
}
    Login or Signup to reply.
  2. 0 
    Please change your CSS.
you can use double "a" in your CSS code. 
put only one a:hover like this following code.

.header nav ul li a:hover {
  border-bottom: 2px solid white;
}
    Login or Signup to reply.
  3. 0

    You are using a a:hover which will apply the styling to the link within the link, so remove one a, do as following

    header nav ul li a:hover {
  border-bottom: 2px solid white;
}

    for sass

    nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
      li {
        display: inline-block;
        
        a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
            &:hover {
                background: #fff;
            }
          }
      }
  }
}

    use & operator to apply the styling on hover. You might be using a:hover with in a.

    Login or Signup to reply.
  4. 0

    Try removing the extra a from your CSS:

    header nav ul li  a:hover {
   border-bottom: 2px solid white;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search