Наведите курсор на цвет фона, который не заполняет сетку CSS правильно - PullRequest
Новая
       27

Наведите курсор на цвет фона, который не заполняет сетку CSS правильно

0 голосов
/ 11 мая 2019 

.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>

Поэтому я пытаюсь создать простое меню в сетке, а затем развернуть его позже, когда у меня будет работать первая часть.

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

Я пробовал возитьсясо свойством overflow, и я понял, что мне, вероятно, нужно смотреть в сторону изменения чего-то другого, кроме цвета фона id #home, используя hover.

Я бы ожидал, что весь фон для каждого элемента меню изменит цвет, а непросто небольшой текст, но я просто не могу понять это, и я ничего не пытаюсь найти в этой проблеме.

Если вы не можете сказать, что я новичок в CSS, не стесняйтесь критиковать моюhtml / CSS и укажите на что-то еще, что является неправильным или не лучшим решением.

Спасибо за внимание,

1 Ответ

1 голос
/ 11 мая 2019

Проблема с вашим кодом заключается в том, что вы применили цвет фона к ссылке вместо окружающего элемента 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;вам действительно не нужны все эти идентификаторы, и вам особенно не нужно размещать ячейки вручную.Постарайтесь сделать ваши 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>

С учетом всего сказанного вы должны ознакомиться с тем, как окно проверки браузера , которое позволяет отлаживать код и посмотреть, чтоCSS применяется для каких элементов.Все современные браузеры имеют один.

...