Блог

Главная - Вопросы по программированию - Как изменить цвет текста внутри панели навигации

Как изменить цвет текста внутри панели навигации

#html #css

Вопрос:

Я новичок в CSS и пытаюсь понять, как изменить цвет текста при наведении курсора. Я попробовал то, что нашел в Интернете, но оно все равно не будет работать при наведении курсора, текст все еще черный, Ниже приведен мой HTML-код:

 * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
} 
 <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600amp;display=swap" rel="stylesheet" />

<link rel="stylesheet" href="./css/style.css" />
<title>Deux Citronella Trading</title>
</head>

<body>
  <nav>
    <div class="logo">
      <h4>LOGO</h4>
    </div>
    <ul class="nav-links">
      <li class="nav-link"><a href="#">Home</a></li>
      <li class="nav-link"><a href="#">About</a></li>
      <li class="nav-link"><a href="#">Contact</a></li>
      <li class="nav-link"><a href="#">Products</a></li>
    </ul>
  </nav>

Мне также интересно, почему я не могу охватить всю навигацию при наведении курсора, как вы можете видеть на скриншоте ниже
введите описание изображения здесь

есть ли также способ для меня закрыть или изменить весь цвет фона панели навигации при наведении на нее?

Комментарии:

1. добавьте nav li:наведите курсор на{цвет:#fff}. Потому что сначала вы объявляете черный цвет для ссылок

2. См. Комментарий Sfili_81. Вы также можете добавить :наведите курсор на содержащий элемент, затем содержащиеся элементы, если они не будут объявлены ниже по дереву, изменят стиль. Если вы хотите изменить все цвета текста li, например, при наведении курсора мыши на навигатор, вам нужно nav:hover li a {color:orange;} , например, объявить.

3. простое .nav-links li:hover { background-color: rgb(6, 168, 106); } сделает эту работу.

Ответ №1:

Вы должны добавить стиль для детей, как это

 * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
}

nav li:hover a{color:#fff} 
 <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" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600amp;display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

Если вы не хотите добавлять новую строку в css и согласны с вашим кодом, который вы могли бы использовать color:inherit для <a> этого, он унаследует цвет от родительского элемента li 

 * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: inherit;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  color: white !important;
  background-color: rgb(6, 168, 106);
} 
 <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" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600amp;display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

Ответ №2:

Вам нужно нацелить свой якорь отдельно и иметь два объявления о наведении. Добавьте следующее (в дополнение к CSS для вашего элемента списка):

 nav li:hover a {
  color:#fff;
}
 
 * {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  font-family: "Poppins", sans-serif;
  background-color: white;
  overflow: hidden;
}

.logo {
  color: black;
  text-transform: uppercase;
  letter-spacing: 10px;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 20%;
}

.nav-links li {
  list-style: none;
  padding: 25px 40px;
}

.nav-links a {
  color: black;
  text-decoration: none;
  letter-spacing: 1px;
  font-size: 15px;
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}

nav li:hover a {
  color:#fff;
} 
 <!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" />
    <link
      href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600amp;display=swap"
      rel="stylesheet"
    />

    <link rel="stylesheet" href="./css/style.css" />
    <title>Deux Citronella Trading</title>
  </head>
  <body>
    <nav>
      <div class="logo">
        <h4>LOGO</h4>
      </div>
      <ul class="nav-links">
        <li class="nav-link"><a href="#">Home</a></li>
        <li class="nav-link"><a href="#">About</a></li>
        <li class="nav-link"><a href="#">Contact</a></li>
        <li class="nav-link"><a href="#">Products</a></li>
      </ul>
    </nav>
  </body>
</html>

Ответ №3:

Пожалуйста, попробуйте это

 nav li:hover a {
    color: #fff;
}

Ответ №4:

Вы указываете на неправильный селектор. Ваш селектор is a есть . Поэтому вы должны поместить свой CSS вот так.

 nav li:hover nav { /*If you want to change background of whole navbar when hovering one item*/
    background-color: rgb(6, 168, 106);
}


nav li a:hover { /*This will change items text color when you hover*/
    color: white !important;
}

Ответ №5:

Используйте приведенный ниже css для изменения цвета при наведении курсора:

 nav li:hover a {
    color: white
}

nav li:hover {
  background-color: rgb(6, 168, 106);
}
Метки: