Как сделать показ блока при использовании клавиши TAB?

Question

[absurd88]

Как можно осуществить показ блока при передвижение по странице TAB-ом?

<ul class="catalog-list">
     <li class="catalog-item">
          <div class="info">
               <h3>Название</h3>
               <p>Информационный портал</p>
               <button class="button">100Руб.</button>
          </div>					
     </li>
</ul>

.catalog-item {
	width: 360px;
  height: 200px;
  
  background-color: tomato;
  
	position: relative;
}

.info {
	position: absolute;
	
	bottom: 0;
	left: 0;
	right: 0;

	background-color: #eeeeee;
	text-align: center;
	
	z-index: 10;
	opacity: 0;

	transition: 0.5s;
}

.catalog-item:hover .info,
.catalog-item:focus .info {
	opacity: 1;
	transition: 0.5s;
}

Comments

[Иван Иванов]

Так ведь табом переключаются на следующую ссылку. То есть нужно отслеживать событие active, если я не ошибаюсь

[Иван Иванов]

а нет, еще и по формам, в таком случае еще и focus

[Ankhena]

В фокус попадают интерактивные элементы и те, кому ручками задали атрибут tabindex.

Интерактивная у вас кнопка.
А дальше можно использовать псевдокласс :focus-within

Иначе будет двойной таб по каждой карточке, что мало удобно при заметном количестве товаров/блоков.

[absurd88]

Ankhena, Благодарю! С данным псевдоклассом все решилось.

[Ankhena]

absurd88, аккуратно, он не работает в ИЕ

[absurd88]

Ankhena, Буду знать. Но я только в самом начале пути, пока что это все только для практики. Всех благ!

Answer 1

[Игорь]

Tab по умолчанию переводит фокус. Вам нужно событие onFocus

Comments

[absurd88]

Я извиняюсь, но насколько понял, это событие работает в связке с JS? До JS еще не дошел.

[Игорь]

absurd88, ну, тогда никак наверное. Можно костылями с помощью CSS делать, но лучше JS

[absurd88]

Понял. Благодарю.