Question

我正在为我的网站构建一个导航栏，并且我正在使用CSS网格，因为我最近才学到它，并且希望对此更加满意。我试图将鼠标悬停在整个按钮上以更改格式，但是，当我将鼠标悬停在链接上时，它只会更改链接的背景。这是我的导航栏的CSS外观：

#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的顶部，我已经尝试了很多方法，但是无法解决。这是项目2的CSS的样子：

#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的任何部分，请告诉我。这将帮助我发展更好的做法。

Answer 1

我修改了您的代码以使其正常运行。 https://codepen.io/anon/pen/dBbxvJ

您可以并排比较更改，但基本上我已删除

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

来自＃navbar-grid 并对锚点进行了一些更改。快速提示：尝试避免更改锚点父母背景以显示活动或悬停状态。这一切都应该与锚标记一起发生。

将鼠标悬停在CSS网格项上时如何突出显示整个按钮？

1 个答案: