Question

.body{

}

.grid-container{
	display: grid;
	width: 1024px;
	grid-template-columns: auto auto auto auto;
	background-color: black;
	padding: 5px 5px;
	border: 1px solid black;
	text-align: center;
	margin: 10px auto;
}

#home, #about, #bookings, #contact {
	padding: 5px 5px;
	margin: 5px 5px;
	background-color: black;
	border: 1px solid white;
	font-weight: bold;
}	

#home, #about, #bookings, #contact, a:hover {
	background-color: red;
}

#home, #about, #bookings, #contact, a:link {
	color: white;

}

#home, #about, #bookings, #contact, a:visited {
	background-color: black;
	color: white;
}



#home{
	grid-column-start: 1;
	grid-column-end: 2;
}


#about{
	grid-column-start: 2;
	grid-column-end: 3;
}

#bookings{
	grid-column-start: 3;
	grid-column-end: 4;
}

#contact{
	grid-column-start: 4;
	grid-column-end: 5;
}

<!Doctype HTML>

<html>

<head>
<link rel = "stylesheet" type = "text/css" href="test2Style.css">
</head>

<body>
	<div class = "grid-container">
			<div id = "home"><a href = "home.html">Home</a></div>
			<div id = "about"><a href = "home.html">About us</a></div>
			<div id = "bookings"><a href = "home.html">Bookings</a></div>
			<div id = "contact"><a href = "home.html">Contact Us</a></div>
	</div>
</body>

</html>

因此，我试图在网格中构建一个简单的菜单，然后在第一部分开始工作后再将其扩展。

我正在尝试设置菜单，以便将鼠标悬停在超链接上，背景颜色更改为红色，但是当前仅更改文本后面的背景。

我已经尝试过处理溢出属性，并且认识到我可能需要着眼于使用悬停更改id #home的背景颜色以外的其他内容。

我希望每个菜单项的整个背景都会改变颜色，而不仅仅是一小部分文字，但是我只是想不通，而且我什么都没想寻找问题。

如果您不能告诉我是CSS的新手，请随时批评我的html / CSS并指出其他任何错误或不正确的做法。

感谢您的关注，

Answer 1

您的代码存在的问题是，您为链接应用了背景色，而不是实际的网格单元格div周围的div。一种解决方案是改为将红色背景应用于悬停时的div，如以下最小示例所示：

div {
  display: inline-block;
  border: 1px solid black;
  padding: 10px 100px;
}

div:hover {
  background: red;
}

<div>
  <a href="#">Home</a>
</div>

但是更好的主意是从链接周围删除div，这完全没有用。使整个框成为链接；也使点击链接更容易。

a {
  display: inline-block;
  border: 1px solid black;
  padding: 10px 100px;
}

a:hover {
  background: red;
}

<a href="#">Home</a>

我们正在着手，我将简化CSS；您确实不需要所有这些ID，尤其不需要手动定位单元格。尝试使您的CSS选择器尽可能简单。如果它们变得有些复杂，则表明您应该在代码中添加更多的类。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  
  width: 1024px;
  margin: 10px auto;
  padding: 5px;
  
  background-color: black;
  color: white;
  font-weight: bold;
  text-align: center;
}

.grid-container a {
  margin: 5px;
  padding: 5px;
  
  border: 1px solid white;
  color: white;
}

.grid-container a:hover {
  background-color: red;
}

<div class="grid-container">
  <a href="home.html">Home</a>
  <a href="home.html">About us</a>
  <a href="home.html">Bookings</a>
  <a href="home.html">Contact Us</a>
</div>

话虽如此，您应该熟悉浏览器的inspection window的方式，它使您可以调试代码并查看将CSS应用于哪些元素。所有现代的浏览器都有一个。

悬停背景颜色无法正确填充CSS网格

1 个答案: