Как выделить всю кнопку при наведении курсора на элемент CSS Grid? - PullRequest
Новая
       13

Как выделить всю кнопку при наведении курсора на элемент CSS Grid?

0 голосов
/ 10 июня 2019

Я создаю навигационную панель для своего веб-сайта и использую сетку CSS, потому что я недавно узнал об этом и хочу, чтобы мне было удобнее. Я пытаюсь заставить всю кнопку изменить форматирование при наведении на нее курсора, однако при наведении курсора на ссылку изменяется только фон ссылки. Вот как выглядит CSS моего navbar: 

#navbar-grid{
  display: grid;
  grid-template: 75px / 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
  width: 100%;
  background-color: #374457;
  color: white;
  font-size: 2em;
  font-family: sans-serif
}

Я попытался изменить высоту div на 100%, чтобы он растягивался сверху вниз на панели навигации. Это работает с точки зрения выделения кнопки, но это сдвигает текст в верхнюю часть div, и я пробовал много вещей, но не могу это исправить. Вот как выглядит CSS элемента 2: 

#item-2{
  background-color: red;
  height: 100%;
  padding: 0px 30px; 
}

#item-2:hover{
  color:inherit;
  background-color: #686671;
}

Я повторил свою проблему на https://codepen.io/kadhirumasankar/pen/rEBgLp. Некоторые предметы странно окрашены, но они помогают мне увидеть, что происходит. Элемент 2 - это тот, для которого я изменил высоту, и я изменил только цвет фона элемента 3.

Если бы вы могли просто найти способ сделать текст в пункте 2 по центру по вертикали, это решило бы мою проблему. Кроме того, если вы считаете, что какие-то части моего CSS не нужны, пожалуйста, дайте мне знать. Это поможет мне развить лучшие практики.

1 Ответ

0 голосов
/ 10 июня 2019

Я изменил ваш код, чтобы он заработал. https://codepen.io/anon/pen/dBbxvJ

Вы можете сравнить изменения бок о бок, но в основном я удалил 

justify-items: center;
align-items: center;

из # navbar-grid и добавил несколько изменений в ваши якоря. Быстрый совет для вас: старайтесь не менять фон привязки родителей, чтобы показывать активные или парящие состояния. Все должно произойти с тегом привязки.

...