Блог

Главная - Вопросы по программированию - Как сделать: наведение курсора влияет только на буквы, а не на поле?

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

#html #css #hover

#HTML #css #наведение курсора

Вопрос:

Мне любопытно, как вы делаете так, чтобы ваше свойство:hover влияло только на отдельные буквы в моей панели навигации, а не просто на наведение курсора мыши на поле.

 * {
  margin: 0px;
  padding: 0px;
}
.navigation-bar {
  height: 3.2em;
  background: gray;
  text-align: center;
  border-top: 2px solid;
  border-bottom: 2px solid;
}
.navigation-bar ul {
  display: inline-block;
  list-style-type: none;
}
.navigation-bar li {
  display: inline;
}
.navigation-bar li a {
  color: white;
  padding: 0px 30px;
  margin: 1em 0 0 -2px;
  text-decoration: none;
  float: left;
  height: 1.2em;
  line-height: 1.2em;
}
.navigation-bar li a:hover,
a:focus {
  background-color: #111;
}  
 <!DOCTYPE html>
<link rel="stylesheet" href="navbar1.css">
<div class="navigation-bar">
  <div id="navigation-container">
    <ul>
      <li><a href="#">Home</a>
      </li>
      <li><a href="#">Gallery</a>
      </li>
      <li><a href="#">About</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
    </ul>
  </div>
</div>

</html>

Вот пример моего кода:
https://jsfiddle.net/uz081886 /

Прямо сейчас при наведении курсора на вкладку отображается черная полоса, как мне сделать так, чтобы она просто выделяла буквы каждого слова? Например, когда я наведу курсор на Home, цвет текста станет черным вместо белого без появления черной полосы?

Ответ №1:

Попробуйте изменить

 .navigation-bar li a:hover, 
a:focus {
  background-color: #111;
}

Для

 .navigation-bar li a:hover, 
a:focus {
  color: #111;
}

Это работает, потому background-color что нацелено на цвет заливки элемента, а color нацелено на цвет текста.

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

1. Спасибо, это именно то, что я искал. Я не понимал, что это было что-то настолько простое, что полностью перешло через мою голову.

2. В любое время! Насколько это здорово, когда все так просто?

3. У меня есть дополнительный вопрос, который я могу задать в отдельной теме. Чтобы сделать мою панель навигации центрированной, лучший способ, который я нашел, — сделать ее встроенным блоком. Однако это делает так, что когда у меня есть активная вкладка или наведите на нее курсор с цветом фона, он выделяет только небольшой раздел. Как я могу заставить его выделить весь раздел, как если бы он не был встроенным блоком? jsfiddle.net/uz081886/6

Ответ №2:

измените свойство background-color на свойство color в css.

 * {
  margin: 0px;
  padding: 0px;
}

.navigation-bar {
  height: 3.2em;
  background: gray;
  text-align: center;
  border-top: 2px solid;
  border-bottom: 2px solid;
}

.navigation-bar ul {
  display: inline-block;
  list-style-type: none;
}

.navigation-bar li {
  display: inline;
}

.navigation-bar li a {
  color: white;
  padding: 0px 30px;
  margin: 1em 0 0 -2px;
  text-decoration: none;
  float: left;
  height: 1.2em;
  line-height: 1.2em;
}

.navigation-bar li a:hover,
a:focus {
  color: #111;
}  
 <div class="navigation-bar">
  <div id="navigation-container">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</div>

Background-свойство преобразования цвета в цвет в css