Блок как большая кнопка со ссылкой?

Question

[Monisa]

www.delivery-club.ru/entities/food/sushi Если навести на блок с названием магазина, то он выделится среди других и дает возможность перейти по этому адресу, это сделано с помощью фреймворков?

Answer 1

[7rulnik]

Никто не мешает использовать <a></a> и

a:hover {
}

Comments

[Monisa]

Только ведь объявлений несколько десятков, а это приведет к выделению всех элементов

[Therapyx]

Monisa: нет, хавер приведет к выделению того елемента, по которому наводят мышкой, в данном случае это box-shadow

[Monisa]

Therapyx: только как потом сделать выделение для всего блока + возможность перейти по ссылке?

[Николай Шабалин]

Monisa: ссылка у Вас все внутренности блока. Оберните их < a >. Незабыв сборосить стиль text-decoration: none; А появляющиеся тени, можно повесить на :hover на весь блок, хоть на родителя ссылки.

[Monisa]

Николай Шабалин: Спасибо

[Дмитрий Королёв]

Очень это как-то несемантичненько. Лучше сделать родительский блок relative и внутрь него абсолютно позиционированный на всю площадь.

[Monisa]

Дмитрий Королёв: Спасибо за подсказку

Answer 2

[Monisa]

codyhouse.co/demo/product-preview-slider/index.html#0

Answer 3

[Виталий Инчин ☢]

Отлавливается клик и меняется location.href.

Answer 4

[Дмитрий Ковальский]

Можно проще. У элемента определить стиль :hover, ловить события мыши(mouseover,mouseout). Ну и ловить событие click по элементу

Answer 5

[Onli]

Все просто, делаем input submit с классом xxx и заворачиваем в форму, устанавливаем кнопке ширину и высоту родителя, даем opacity 0, и добавляем :hover блоку