Не изменяется цвет фона блока с помощью :hover

216

18 апреля 2017, 08:27

Добрый день, уважаемые программисты! Я еще совсем зеленый в верстке, посему прошу Вашей помощи в решении проблемы с версткой макета.

По ТЗ при наведении на пункт верхнего меню, цвет фона меняется на более светлый, но у меня смена через :hover не срабатывает. Не срабатывает т.к. в спокойном состоянии фон залит градиентом, если его убрать, то :hover начинает работать.

И еще одна проблема, с изменением размера меню. Если начать сужать страницу - пункты меню перекидываются вниз, как и нужно, но все равно остается тень от тега ul.

Меню по ссылке - http://jsbin.com/faxiqakora/edit?html,css,output

Answer 1

Смена цвета при ховере

Используйте свойство background вместо background-color - тогда оно перекроет background-image, и вы увидите изменения при ховере.

Тень при сужении меню

Тень оставалась, потому что у контейнера была задана фиксированная высота, равная высоте пунктов в один ряд.

Можно расположить пункты меню не флоатами, а инлайн-блоками. Тогда контейнер без дополнительных манипуляций будет принимать корректную высоту.

.top-menu-list { 
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.65); 
  background: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%); 
  background: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%); 
  background: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%); 
  display: inline-block; 
  padding: 0; 
  font-size: 0; 
  line-height: 0; 
} 
 
.top-menu-item { 
  display: inline-block; 
  list-style-type: none; 
  text-align: center; 
} 
 
.top-menu-link { 
  font-family: Ubuntu; 
  font-size: 18px; 
  color: white; 
  line-height: 52px; 
  display: block; 
  width: 190px; 
  border-right: 1px solid #df4242; 
  border-left: 1px solid #df4242; 
  background: -moz-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%); 
  background: -webkit-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%); 
  background: -ms-linear-gradient( 90deg, rgb(170, 3, 22) 0%, rgb(203, 24, 44) 100%); 
  text-decoration: none; 
} 
 
.top-menu-link:hover { 
  background: #000; 
}

<div class="header-menu"> 
  <ul class="top-menu-list"> 
    <li class="top-menu-item"><a href='#' class="px-18 f-white top-menu-link">Компания</a></li> 
    <li class="top-menu-item"><a href='#' class="px-18 f-white top-menu-link">Каталог</a></li> 
    <li class="top-menu-item"><a href='#' class="px-18 f-white top-menu-link">Новости</a></li> 
    <li class="top-menu-item"><a href='#' class="px-18 f-white top-menu-link">Отзывы</a></li> 
    <li class="top-menu-item"><a href='#' class="px-18 f-white top-menu-link">Заявка</a></li> 
    <li class="top-menu-item"><a href='#' class="px-18 f-white top-menu-link">Контакты</a></li> 
  </ul> 
</div>