У меня проблема с этим css. Я хотел бы, чтобы при наведении курсора мыши на элемент цвет текста становился синим, а фон оставался белым. Я также хотел бы, чтобы текст меню был белым. Что происходит, когда я навожу мышь, так как элемент .menu li:hover должен иметь белый фон, даже текст, если я помещаю

a {
    color: white;
}

Он остается белым. Как я могу это решить?

.menu{
  list-style-type: none;

  width: 200px;
  background: linear-gradient(to bottom,  #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}



.menu li:hover{
  background: white;
}


a:focus,a:hover{
    outline:0;
    color: #1D72B9;
    text-decoration:none
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color:white;
}

.menu li:hover:after{
  top: -10px;
  background: radial-gradient(circle at top left,  10px, white 11px);
}

.menu li:hover:before{
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}


a {

    color: white;

}



li,ul{
    padding:0;
    margin:0
}
<ul class="menu">
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Profile</span></a></li>
  <li class="active"><a href="<%= restaurants_reservation_book_path %>"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Reservation Book</span></a></li>
  <li><a href="#"><i class="fa fa-chart-bar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Statistics</span></a></li>
  <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> CRM</span></a></li>
  <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Settings</span></a></li>
  <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Support</span></a></li>

</ul>
html css
1
Vito 4 Фев 2022 в 12:51

6 ответов

Лучший ответ

Вы меняете цвет ссылки только при наведении курсора на саму ссылку, но вы меняете цвет фона при наведении курсора на <li>.

Поскольку ссылка не является блочным элементом, она не расширяется, чтобы заполнить доступное пространство, поэтому, если вы наведете курсор на <li> справа от ссылки, вы не наведете курсор по ссылке.

Измените <a> на display:block; и color:inherit;. Переместите отступ с <li> на <a>. И установите цвет на li:hover вместо a:hover.

.menu {
  list-style-type: none;
  width: 200px;
  background: linear-gradient(to bottom, #1D72B9, #35A8E0);
  color: white;
  padding: 30px 0 30px 30px;
}

.menu li {
  position: relative;
  border-radius: 10px 0 0 10px;
}

.menu li:hover {
  background: white;
  color: #1D72B9;
}
.menu a {
  display: block;
  color: inherit;
  padding: 5px;
}

.menu a:focus {
  outline: 0;
  text-decoration: none
}

.menu li:hover:after,
.menu li:hover:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color: white;
}

.menu li:hover:after {
  top: -10px;
  background: radial-gradient(circle at top left, 10px, white 11px);
}

.menu li:hover:before {
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}

a {
  color: white;
}

li,
ul {
  padding: 0;
  margin: 0
}
<ul class="menu">
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Profile</span></a></li>
  <li class="active"><a href="<%= restaurants_reservation_book_path %>"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Reservation Book</span></a></li>
  <li><a href="#"><i class="fa fa-chart-bar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Statistics</span></a></li>
  <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> CRM</span></a></li>
  <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Settings</span></a></li>
  <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Support</span></a></li>

</ul>
1
Richard Deeming 4 Фев 2022 в 12:59

Это то, что вам нужно.

li:hover a{
color: blue;
}
2
Jonathan772 4 Фев 2022 в 12:57

Вам не нужно объявлять стиль для зависших ссылок отдельно (a:hover), вы можете просто добавить css для ссылок, которые находятся внутри зависшего родительского элемента, например:

.menu li:hover a {
    outline:0;
    color: #1D72B9;
    text-decoration:none;
}

Это означает, что стиль будет применяться к ссылкам, завернутым в оболочку "li" в элемент с классом "menu" при наведении курсора на "li".

Ваше решение:

.menu{
  list-style-type: none;

  width: 200px;
  background: linear-gradient(to bottom,  #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li{
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}



.menu li:hover{
  background: white;
}

.menu li:hover a {
  outline:0;
  color: #1D72B9;
  text-decoration:none;
}

.menu li:hover:after,
.menu li:hover:before{
  content:'';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color:white;
}

.menu li:hover:after{
  top: -10px;
  background: radial-gradient(circle at top left,  10px, white 11px);
}

.menu li:hover:before{
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}


a {

    color: white;

}



li,ul{
    padding:0;
    margin:0
}
<ul class="menu">
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Profile</span></a></li>
  <li class="active"><a href="<%= restaurants_reservation_book_path %>"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Reservation Book</span></a></li>
  <li><a href="#"><i class="fa fa-chart-bar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Statistics</span></a></li>
  <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> CRM</span></a></li>
  <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Settings</span></a></li>
  <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Support</span></a></li>

</ul>
1
Xeelley 4 Фев 2022 в 12:58

Вы должны сделать <a> полной ширины и высоты ли.

Если вы дадите <a> блок отображения, он будет работать. также добавьте отступ в <a>then вместо <li>.

ИЛИ

Сделайте наведение на li вместо a

.menu li:hover a { 
   color: yourColor;
}
1
Pepijn 4 Фев 2022 в 12:58 
.menu {
  list-style-type: none;
  width: 200px;
  background: linear-gradient(to bottom, #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li {
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}

.menu li:hover {
  background: white;
}

.menu li:hover > a {/*use of child operator*/
  outline: 0;
  color: #1D72B9;
  text-decoration: none
}

a:focus,
a:hover {
  outline: 0;
  color: #1D72B9;
  text-decoration: none
}

.menu li:hover:after,
.menu li:hover:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color: white;
}

.menu li:hover:after {
  top: -10px;
  background: radial-gradient(circle at top left, 10px, white 11px);
}

.menu li:hover:before {
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}

a {
  color: white;
}

li,
ul {
  padding: 0;
  margin: 0
}
<ul class="menu">
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Profile</span></a></li>
  <li class="active"><a href="<%= restaurants_reservation_book_path %>"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Reservation Book</span></a></li>
  <li><a href="#"><i class="fa fa-chart-bar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Statistics</span></a></li>
  <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> CRM</span></a></li>
  <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Settings</span></a></li>
  <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Support</span></a></li>

</ul>

Просто используйте > оператор

получить ссылку здесь

  • этот ответ поддерживает ваш стиль, включая display:none, и никаких дополнительных шагов не требуется
1
Neptotech -vishnu 4 Фев 2022 в 13:14

Дает ли это вам желаемый результат?

.menu {
  list-style-type: none;
  width: 200px;
  background: linear-gradient(to bottom, #1D72B9, #35A8E0);
  padding: 30px 0 30px 30px;
}

.menu li {
  position: relative;
  padding: 5px;
  border-radius: 10px 0 0 10px;
}

.menu li:hover {
  background: white;
}

.menu li:focus a,
.menu li:hover a {
  outline: 0;
  color: #1D72B9;
  text-decoration: none
}

.menu li:hover:after,
.menu li:hover:before {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  right: 0px;
  color: white;
}

.menu li:hover:after {
  top: -10px;
  background: radial-gradient(circle at top left, 10px, white 11px);
}

.menu li:hover:before {
  bottom: -10px;
  background: radial-gradient(circle at bottom left, 10px, white 11px);
}

a {
  color: white;
}

li,
ul {
  padding: 0;
  margin: 0
}
<ul class="menu">
  <li><a href="<%= restaurants_restaurant_profile_path %>"><i class="fa fa-home" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Profile</span></a></li>
  <li class="active"><a href="<%= restaurants_reservation_book_path %>"><i class="fa fa-tasks" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Reservation Book</span></a></li>
  <li><a href="#"><i class="fa fa-chart-bar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Statistics</span></a></li>
  <li><a href="#"><i class="fa fa-user" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> CRM</span></a></li>
  <li><a href="#"><i class="fa fa-calendar" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Settings</span></a></li>
  <li><a href="#"><i class="fa fa-cog" aria-hidden="true"></i><span class="hidden-xs hidden-sm"> Support</span></a></li>

</ul>
0
Naren Murali 4 Фев 2022 в 12:57
💵 Получи $100 на хостинг на 60 дней.
Регистрируйся!

Новые вопросы

2 Проверка пользователя Node JS с использованием базы данных
2 Фавикон React.js не меняется
3 Я сделал адаптивный веб-сайт и включил переключаемое меню, но оно не работает
2 Мое фоновое изображение Wrapper не отображается
3 Как отобразить пользовательский текст из выпадающего списка
3 Социальные кнопки застряли посередине
2 Отключить перенос для iframe
3 Как разместить таблицу в правой части экрана с помощью HTML?
4 Как сделать так, чтобы вся ссылка <div> затемнялась при наведении?
2 родной JavaScript - удалите тег html, но оставьте содержимое на том же месте
Все вопросы по теме html >

html

HTML (язык разметки гипертекста) - это язык разметки для создания веб-страниц и другой информации, отображаемой в веб-браузере. Вопросы, касающиеся HTML, должны включать минимальный воспроизводимый пример и некоторое представление о том, чего вы пытаетесь достичь. Этот тег редко используется отдельно и часто используется вместе с [CSS] и [javascript].

Подробнее про html...