Как выделить активный пункт блок?

Question

[N-I]

Не получается. Что неправильно?

<ul class="list-inline">
		<li><a href="#"><img src="img/1.png"></a></li>
	</ul>

.list-inline li {
	display: bloсk;
 	height: 100px;
	line-height: 100px;
	min-width: 100px;	
	outline: 1px solid #e5e5e5;
	text-align: center;
}

.list-inline ul li a:focus, .list-inline ul li a:hover {
    background-color: #f5f5f5;
}

Answer 1

[Милок Мурлыка]

последний селектор неправильный (ul там лишний), https://jsfiddle.net/mmurlyka/h8qp249d/

Comments

[N-I]

Почему-то не во всю ширину получается. https://cloud.mail.ru/public/9vae/KTFyKbFAf

[Милок Мурлыка]

N-I: покажите код в песочнице

[N-I]

Милок Мурлыка: Скажите как. Просто я не знаю, как это сделать и где.

[Милок Мурлыка]

N-I: в ваш код от себя я добавил только это: .list-inline li a {
display: block;
height: 100px;
} высота в данном случае не обязательная, все остальное ваш код

[N-I]

Милок Мурлыка: Да, правильно. Нашла, что лишнее. Всё получилось. Спасибо.

[Милок Мурлыка]

N-I: Пожалуйста, успехов вам

Answer 2

[Денис Князев]

Вот так вторая часть должна выглядеть

.list-inline li a:focus, .list-inline li a:hover {
    background-color: #f5f5f5;
}

Comments

[N-I]

Так и делала сначала. Всё равно не выделяется. По разному пробовала.

[Милок Мурлыка]

N-I: попробуйте ссылку сделать блочной, https://jsfiddle.net/mmurlyka/h8qp249d/

Answer 3

[Михаил Еникеев]

Добавте класс active

Comments

[N-I]

Вот так? .list-inline li .active a:focus, .list-inline li .active a:hover

[Михаил Еникеев]

N-I: Нет в теги li добавь класс active он уже должен будет стать активным