How to make a list item <li> act like a link <a>

I can't seem to figure out how you make an <a> inside a <li> element act like it takes the full element, so when you actually hover over the list item your mouse changes to a clickable region. Now i'm unable to change the text-color on hover over the list-item (only when I hover over the text) and unable to click on the list item (again only when I hover over the text). Any help is welcome!

nav{
  display: flex;
  justify-content: center;
  padding: 3rem 0rem;
}

ul{
  display: flex;
  justify-content: space-between;
  width: 40%;
}

li{
  list-style: none;
  display: inline;
  padding: 1rem 2rem;
}

a{
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-family: 'Fira Sans';
  letter-spacing: .2rem;
  font-size: 1.5rem;
  display: block;
}


a:hover{
  color: white;
}
li:hover{
  color: white;
  border-radius:1.5rem;
  background: linear-gradient(to left, #363795, #005c97);
}

<nav>
          <ul>
            <li><a href="./index.html">home</a></li>
            <li><a href="#">activiteiten</a></li>
            <li><a href="#">extra</a> </li>
          </ul>
        </nav>  

---

Add padding to a instead of li , and for the best practive, use inheritance .

eg nav ul li a:hover

nav {
  display: flex;
  justify-content: center;
  padding: 3rem 0rem;
}

nav ul {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

nav ul li {
  list-style: none;
  display: inline;
}

nav ul li a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-family: 'Fira Sans';
  letter-spacing: .2rem;
  font-size: 1.5rem;
  display: block;
  padding: 1rem 2rem;
}

nav ul li a:hover {
  color: white;
  border-radius: 1.5rem;
  background: linear-gradient(to left, #363795, #005c97);
}

<nav>
  <ul>
    <li><a href="./index.html">home</a></li>
    <li><a href="#">activiteiten</a></li>
    <li><a href="#">extra</a> </li>
  </ul>
</nav>

---

检查这个，

nav {
  display: flex;
  justify-content: center;
  padding: 3rem 0rem;
}

ul {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

ul li {
  list-style: none;
  display: inline;
}

ul li a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-family: 'Fira Sans';
  letter-spacing: .2rem;
  font-size: 1.5rem;
  display: block;
  padding: 1rem 2rem;
}

ul li a:hover {
  color: white;
  border-radius: 1.5rem;
  background: linear-gradient(to left, #363795, #005c97);
}

<nav>
  <ul>
    <li><a href="./index.html">home</a></li>
    <li><a href="#">activiteiten</a></li>
    <li><a href="#">extra</a> </li>
  </ul>
</nav>

---

填充添加到a代替li ，然后只适用悬停于a -不li 。

nav {
  display: flex;
  justify-content: center;
  padding: 3rem 0rem;
}

ul {
  display: flex;
  justify-content: space-between;
  width: 40%;
}

li {
  list-style: none;
  display: inline;
}

a {
  text-decoration: none;
  color: black;
  text-transform: uppercase;
  font-family: 'Fira Sans';
  letter-spacing: .2rem;
  font-size: 1.5rem;
  display: block;
  padding: 1rem 2rem;
}

a:hover {
  color: white;
  color: white;
  border-radius: 1.5rem;
  background: linear-gradient(to left, #363795, #005c97);
}

<nav>
  <ul>
    <li><a href="./index.html">home</a></li>
    <li><a href="#">activiteiten</a></li>
    <li><a href="#">extra</a> </li>
  </ul>
</nav>

链接地址: http://www.djcxy.com/p/27410.html

上一篇: 使用具有渐变背景的CSS3转场

下一篇: 如何使列表项<li>像链接<a>那样工作