CODEWITHSUNDEEP
htmlcsshovernav
idrissAbbou
idrissAbbou

Reputation: 105

the hover doesn't cover the whole li element in the nav

I'm trying to create a hover state for my a element in the navigation bar, the problem is the hover color want cover the whole height of the nav.

I tried solving this using padding on the a element, but it doesn't look like a correct way, because I keep changing values until I got the right one.

body,
html {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
}
.container {
  padding: 0px;
  margin: 0px;
  list-style: none;
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
  text-transform: capitalize;

  display: flex;
}
.search {
  flex: 1;
}
.search .search-input {
  width: 100%;
  font-size: 1.8rem;
  text-transform: capitalize;
}
.container a {
    text-decoration: none;
    color: white;
    padding: 0 10px 6px 10px; /*this what I use to fix it */
}
.container a:hover {
    text-decoration: none;
    color: white;
    background: red;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="./css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <nav>
        <ul class="container">
            <li><a href="#">home</a></li>
            <li><a href="#">profile</a></li>
            <li class="search">
                <input type="text" class="search-input" placeholder="search">
            </li>
            <li><a href="#">logout</a></li>
        </ul>
    </nav>
</body>

</html>

Upvotes: 0

Views: 1262

Answers (1)

pretzelhammer
pretzelhammer

Reputation: 15105

a tags by default are an inline element, give then the styles display: block; and height: 100% to take up the full space of their parents. Snippet:

body,
html {
  margin: 0;
  padding: 0;
}

nav {
  background: black;
}
.container {
  padding: 0px;
  margin: 0px;
  list-style: none;
  color: white;
  font-weight: bold;
  font-size: 1.8rem;
  text-transform: capitalize;

  display: flex;
}
.search {
  flex: 1;
}
.search .search-input {
  width: 100%;
  font-size: 1.8rem;
  text-transform: capitalize;
}
.container a {
    text-decoration: none;
    color: white;
    display: block;
    height: 100%;
}
.container a:hover {
    text-decoration: none;
    color: white;
    background: red;
}
<nav>
  <ul class="container">
    <li><a href="#">home</a></li>
    <li><a href="#">profile</a></li>
    <li class="search">
      <input type="text" class="search-input" placeholder="search">
    </li>
    <li><a href="#">logout</a></li>
  </ul>
</nav>

Upvotes: 3

Related Questions