Как сделать так, чтобы при наведении курсора на кнопку сайта он менял цвет?

Question

Извините, если я пишу неправильно, но я впервые использую stackoverflow.

Я создаю свой веб-сайт и хочу, чтобы верхние навигационные ссылки меняли цвет фона при наведении курсора. Не текст, а область на панели, которая проходит сверху вниз. Это сделано для того, чтобы пользователь мог указывать, что он находится над определенной ссылкой. Это также будет использоваться для улучшения внешнего вида сайта. Как бы я это сделал?

.header {
  top: 0;
  position: sticky;
  width: 100%;
  background: #f0f0f0; 
  clear: both;
  height: 80px;
  align-content: center;
  z-index: +2;
  overflow: hidden;
}
.header a:hover {
    background-color: #f2f2f2;
}
  #logo {
    position: sticky;
    float:left;
    margin:0;
    width: 220px;
    height: 60px;
    margin-left: 20px;
    margin-top: 10px; /* if you want it vertically middle of the navbar. */
  }
  
  #navlist {
    float: right;
      /* if you want it vertically middle of the navbar */
}
    
    /* nav list style */
    li {
    display: inline;
    list-style-type: square;
    padding-right: 20px;
    font-family: "Verdana", sans-serif;
    font-size: 25px;
    display: inline-block;
    vertical-align: top;
    line-height: 47.5px;  
    height: 80px;
}
        
/* link style */
a:link {
  text-decoration: none;
  color: black;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: #ffffff;
}

a:active {
  text-decoration: none;
}

<div class="header">
  <a href="homepage.html"><img id="logo" href="homepage.html" src="https://i.imgur.com/PTxdlc0.png"></a>
  <ul id="navlist">
    <li id="active"><a href="alliance.html">ALLIANCE</a></li>
    <li><a href="asp.html">ASP</a></li>
    <li><a href="diamondback.html">DIAMONDBACK</a></li>
    <li><a href="type.html">TYPE</a></li>
    <li><a href="info.html">INFO</a></li>
  </ul>
</div>

Answer 1

добавьте следующий код к вашему css:

.active {
  background-color: blue;
}

и измените:

<li id="active"><a href="alliance.html">ALLIANCE</a></li>

на

<li class="active"><a href="alliance.html">ALLIANCE</a></li>

и тогда ссылка, по которой щелкают (class = "active"), будет иметь синий цвет фона. Вы можете изменить цвет так, как вы хотите

решение может выглядеть следующим образом

Answer 2

Вы просто переместите селектор :hover в <li></li>, окружающий набор тегов <a></a>, и затем убедитесь, что эти элементы списка расширяются сверху вниз.

ul#navlist li:hover { background-color: red; }