Почему не работает a:hover на кнопке?

Question

[jesus-iscariot]

Есть такой код кнопки на css:

.button {
	margin-top: 100px;
}
.button-item {
	display: block;
	max-width: 260px;
	border: 3px solid #328888;
	border-radius: 5px;
	color: white;
	text-align: center;
	padding: 10px 20px;
	background-color: #215858;
}

.button-item a:hover {
	background-color: #328888
	border: 2px solid #215858;
}

И вот такой на html:

<div class="button">
	<a href="#" class="button-item">Lorem ipsum</a>
</div>

Вопрос: почему при наведении ничего не происходит?

Comments

[jesus-iscariot]

Спасибо за ответы, но я решил всё сам. Проблема оказалась до одури тривиальной - в одном месте не была поставлена точка с запятой, из-за чего код не обрабатывался.

[Святослав Пупырев]

Попробуй button-item:hover

Answer 1

[Данил Полянский]

Вы в hover указали button-item a:hover, но button-item и a это одно и тоже, и именно из-за этого скрипт не работал. Надо было указать просто класс div'a button a:hover и всё будет работать отлично.

P.S. А также в строке background-color: #328888 вы забыли поставить ";" в конце :)

CSS:

.button {
  margin-top: 100px;
}
.button-item {
  display: block;
  max-width: 260px;
  border: 3px solid #328888;
  border-radius: 5px;
  color: white;
  text-align: center;
  padding: 10px 20px;
  background-color: #215858;
}

.button a:hover {
  background-color: #328888;
  border: 2px solid #215858;
}

HTML:

<div class="button">
  <a href="#" class="button-item">Lorem ipsum</a>
</div>

Answer 2

[IninsaY]

.button-item a:hover {
  background-color: #328888
  border: 2px solid #215858;
}

Вы .button-item a:hover этим говорите для css, что есть такой-то класс, а в нём ссылка, но так не нужно, возьмите просто так:

.button-item:hover {
  background-color: #328888
  border: 2px solid #215858;
}

Comments

[jesus-iscariot]

К сожалению, это не работает

[IninsaY]

jesus-iscariot, а что должно получиться?

[Виктор Дементьев]

jesus-iscariot, Конечно не будет работать, вы забыли поставить ";".
Вот что должно было выйти:

.button-item:hover {
  background-color: #328888; /* Вот здесь */
  border: 2px solid #215858;
}

[Vaultboy84]

Правильно вот так: a.button-item:hover {...}
Потому, что вы обращаетесь к ссылке с классом button-item, а не к блоку button-item, внутри которого ссылка.

Answer 3

[Lord_Dantes]

.button a:hover {
  background-color: #328888;
  border: 2px solid #215858;
}

Answer 4

[Ulug]

a.button-item

a.button-item:hover

Сделай так