当我将鼠标悬停在整个块而不只是文本上时，如何激活链接？

debugcn 发表于 Dev

索尼

当我将鼠标悬停在菜单上时，颜色会正确更改，但是只有当我将鼠标悬停在文本上时，该链接才会激活，我希望在我刚触摸该块或它更改颜色时可以将其激活。感激不尽

    	a {
    	  text-decoration: none;
    	  color: #fff;
    	}
    	#navbar {
    	  background: #204d86;
    	  border-radius: 5px;
    	}
    	#navbar>ul {
    	  list-style: none;
    	  margin: 0;
    	  padding: 0;
    	  height: 40;
    	  margin-left: 300px;
    	}
    	#navbar>ul>li {
    	  float: left;
    	  padding: 10px 35px;
    	  border-radius: 5px;
    	}
    	#navbar>ul>li:hover {
    	  background: #5cadff;
    	  border-radius: 5px;
    	}
    	#navbar>ul>li>ul {
    	  display: none;
    	  padding: 0;
    	  position: absolute;
    	  background: #204d86;
    	  border-radius: 5px;
    	}
    	#navbar>ul>li>ul>li {
    	  padding: 0 20px;
    	  line-height: 40px;
    	  display: block;
    	  background: #5cadff;
    	}
    	#navbar>ul>li:hover>ul {
    	  display: block;
    	}
    	#navbar>ul>li>ul>li>ul {
    	  display: none;
    	  padding: 0 30px;
    	  position: absolute;
    	}
    	#navbar li:hover > a {
    	  color: #000;
    	}
    	#navbar>ul>li>ul>li:hover {
    	  background: #204d86;
    	}
    	#navbar:after {
    	  content: "";
    	  clear: both;
    	  display: table;
    	}

<div id="navbar">
  <ul>
    <li><a class="active" href="../index/myindex.html">HOME</a>
    </li>

    <li><a href="#">STAYING HEALTHY</a>
      <ul>
        <li><a href="#">Diet & Weight loss</a>
        </li>
        <li><a href="#">Exercises</a>
        </li>
        <li><a href="#">Physical Activity</a>
        </li>
        <li><a href="#">Healthy Eating</a>
        </li>
      </ul>
    </li>

    <li><a href="#">DISEASES</a>
      <ul>
        <li><a href="#">Stock</a>
        </li>
        <li><a href="#">Osteoporosis</a>
        </li>
        <li><a href="#">Diabetes</a>
        </li>
        <li><a href="#">Heart Disease</a>
        </li>
      </ul>
    </li>

    <li><a href="#">MIND&MOOD </a>
      <ul>
        <li><a href="#">Depression</a>
        </li>
        <li><a href="#">Anxiety</a>
        </li>
        <li><a href="#">Addiction</a>
        </li>
        <li><a href="#">Stress</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

保利

a {
    text-decoration:none;
    color:#fff;
    display: block;
}

然后，将您在上的所有填充移至li链接本身。根据需要进行调整。

body {
  background: #000;
}
a {
  text-decoration: none;
  color: #fff;
  display: block;
}
#navbar {
  background: #204d86;
  border-radius: 5px;
}
#navbar>ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 40px;
}
#navbar>ul>li {
  float: left;
  border-radius: 5px;
}
#navbar>ul>li>a {
  padding: 10px 35px;
}
#navbar>ul>li:hover {
  background: #5cadff;
  border-radius: 5px;
}
#navbar>ul>li>ul {
  display: none;
  padding: 0;
  position: absolute;
  background: #204d86;
  border-radius: 5px;
}
#navbar>ul>li>ul>li {
  line-height: 40px;
  display: block;
  background: #5cadff;
}
#navbar>ul>li>ul>li>a {
  padding: 0 20px;
}
#navbar>ul>li:hover>ul {
  display: block;
}
#navbar>ul>li>ul>li>ul {
  display: none;
  padding: 0 30px;
  position: absolute;
}
#navbar li:hover > a {
  color: #000;
}
#navbar>ul>li>ul>li:hover {
  background: #204d86;
}

<div id="navbar">
  <ul>
    <li><a class="active" href="../index/myindex.html">HOME</a>

    </li>
    <li><a href="#">STAYING HEALTHY</a>

      <ul>
        <li><a href="#">Diet & Weight loss</a>
        </li>
        <li><a href="#">Exercises</a>
        </li>
        <li><a href="#">Physical Activity</a>
        </li>
        <li><a href="#">Healthy Eating</a>
        </li>
      </ul>
    </li>
    <li><a href="#">DISEASES</a>

      <ul>
        <li><a href="#">Stock</a>
        </li>
        <li><a href="#">Osteoporosis</a>
        </li>
        <li><a href="#">Diabetes</a>
        </li>
        <li><a href="#">Heart Disease</a>
        </li>
      </ul>
    </li>

  </ul>
</div>