Div как ссылка

Как сделать, чтобы слой целиком был ссылкой?

Сделать блочный элемент, который целиком является ссылкой на указанную страницу.

Решение

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить свойство display со значением block , чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать height : 100% , ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML5 CSS 2.1 IE Cr Op Sa Fx

       
Ссылка 
  

Результат примера показан на рис. 1. Обратите внимание, что курсор мыши превращается в указатель внутри слоя целиком, а не только на тексте, как это происходит с обычными ссылками.

Как вместо блока div создать ссылку с тегом а?

2. У вас ошибка в вашем коде, стоит ненужная запятая и нет кавычек у ссылке:

3 years ago

Ваш ответ

• Создается структура файлов в visual studio code, не так как в уроке, как решить эту проблему?
• Не работает emmet в visual studio code?
• Не проходит оплата россия карта mastercard и есть возможность узнать цену в рублях?
• Здраствуйте у меня вопрос такой как мы можем получить только name с помощью цикл foreach?
• Как в sublime text открыть 2 папки в одном окне? открывается еще одно окно sublime text?
• Хочу изучить javascript для работы с nodejs, какой минимальный уровень знаний нужен?
• Есть ли готовые коды к урокам?
• Как открыть исходный код веб-страницы на mac в браузере?
• Не добавляется запись из xml в бд, что делаю неправильно?
• Позиционирование логотипа по центру хедера как сделать?
• Какой правильный синтаксис медиа запросов css?
• Как установить xampp на windows 32-bit?
• Как задать фоновое изображение для шапки (header) в bootstrap 3?
• Как прижать footer к низу в bootstrap 3?
• Xampp или open server?

• Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Русский —>

• Отзывы о курсах FructCode
• Политика конфиденциальности
• Условия использования
• Цены и оплата
• Все курсы
• Партнерская программа
• Комьюнити

• HTML/CSS Advanced
• Bootstrap 4
• VueJS Фреймворк
• Yii2 Фреймворк
• Modern Javascript
• Javascript/jQuery
• Все курсы

Как сделать весь блок ссылкой?

Нашел пожалуй самое простое решение — сделать display: block для ссылки и все! 🙂 В этом случае блок и ссылка совмещаются в одном элементе, проблема решена.

21 фев 2013 в 14:16

Это класcика, особенно если верстаешь меню и элементам списка делаешь float, а ссылкам display:block.

21 фев 2013 в 14:53

div .mydiv:hover ? в css
$(«div.mydiv).click() ? в js

Отслеживать
ответ дан 21 фев 2013 в 13:15
7,418 17 17 серебряных знаков 22 22 бронзовых знака
Спасибо. На hover реагирует, ссылки пока нет. Js, это куда ставить?
21 фев 2013 в 13:54
куда-нибудь в страничку, не? 🙂 я телепатию в школе не прощожил, уж извините)
21 фев 2013 в 13:59

Просто меняешь DIV на A со стилем display:block

 . .my-block < display: block; >.my-block:hover

Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
ответ дан 21 фев 2013 в 15:28
854 4 4 серебряных знака 8 8 бронзовых знаков

var target='.block'; jQuery(target).each(function()< jQuery(this).click(function()< location = jQuery(this).find('a').attr('href');>); jQuery(this).css('cursor','pointer'); >); 

Отслеживать
ответ дан 25 фев 2013 в 12:58
756 3 3 золотых знака 17 17 серебряных знаков 41 41 бронзовый знак

HTML:

CSS:

div.content < display: block; overflow: hidden; background-color: #ccc; width: 200px; height:200px; border: 1px solid #000; >div.content > a < display: block; width: 100%; height: 100%; overflow: hidden; text-decoration: none; >div.content > a div < display: block; overflow: hidden; width: 100%; height: 100%; color: #543454; >div.content > a div p

Отслеживать
ответ дан 22 сен 2016 в 14:57
621 4 4 серебряных знака 14 14 бронзовых знаков

• html
• css
• вёрстка

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Ссылки внутри страницы

Ссылки допустимо указывать не только на другой сайт или документ, но и на элемент внутри страницы. Такая возможность применяется для добавления оглавления страницы с быстрым переходом к нужному разделу (так делает, например, Википедия) или для создания различных элементов интерфейса вроде вкладок.

Элемент, на который требуется сделать ссылку, обозначается идентификатором, а адрес ссылки меняет свой вид на #id, как показано в примере 1.

Пример 1. Ссылка на заголовок

Результат данного примера показан на рис. 1. К каждому заголовку добавлен уникальный идентификатор через атрибут id , а сама ссылка имеет вид #id, где id — идентификатор элемента на который делается переход.

Рис. 1. Ссылки на заголовки

Как видите, по своему виду такие ссылки ничем не отличаются от ссылок на другой сайт. Но стоит открыть любую ссылку в примере, как браузер переместит фокус к заголовку, на который ведёт ссылка. При этом немного поменяется и адресная строка, в конец пути будет добавлено #t1 или подобное. Если нажать кнопку «Назад» в браузере, то мы вернёмся обратно к началу страницы и адресная строка примет исходный вид. Это позволяет передавать ссылки вида webref.ru/layout/#title, при открытии такой ссылки в браузере будет загружена страница и сделан переход к элементу с идентификатором title.

Псевдокласс :target

CSS позволяет управлять видом элемента, на который был сделан переход, с помощью псевдокласса :target , как показано в примере 2.

Пример 2. Использование :target

Теперь, если переходить по ссылкам оглавления, то заголовки будут менять свой цвет и фон (рис. 2).

Рис. 2. Стиль заголовка при переходе