0 Пользователей и 1 Гость просматривают эту тему.
  • 5 Ответов
  • 1832 Просмотров
*

suic

  • Осваиваюсь на форуме
  • 23
  • 1 / 0
Собственно, как реализовать, люди добрые? Нужно при наведении на плитку, чтобы вся она стала ссылкой.

Вот, что есть:  https://codepen.io/awbo/pen/zYvxZgW
*

draff

  • Гуру
  • 5803
  • 434 / 7
  • ищу работу
*

suic

  • Осваиваюсь на форуме
  • 23
  • 1 / 0
Re: Div с картинкой и текстом как ссылка
« Ответ #2 : 11.04.2020, 09:07:04 »
Код
.item{ cursor:pointer; }
Поменялся курсор при наведении, а где ссылку прописать?
*

draff

  • Гуру
  • 5803
  • 434 / 7
  • ищу работу
Re: Div с картинкой и текстом как ссылка
« Ответ #3 : 11.04.2020, 10:01:20 »
При наведении через JavaScript. Или в структуре, но валидатор будет ругаться
Код
<a href="#" ><div class="item"></div></a>
*

fbr

  • Завсегдатай
  • 1625
  • 189 / 7
Re: Div с картинкой и текстом как ссылка
« Ответ #4 : 11.04.2020, 10:22:12 »
Если правильно понял. Можно использовать такую конструкцию:
Код
<div class="item">
<img ... />
<a ...></a>
</div>

ссылку делаем абсолютной и ширина=высота=100%
Код
.item {position: relative;}
.item a {
position:absolute;
left:0;
top:0;
width:100%;
height: 100%;
}
*

suic

  • Осваиваюсь на форуме
  • 23
  • 1 / 0
Re: Div с картинкой и текстом как ссылка
« Ответ #5 : 11.04.2020, 12:47:15 »
спасибо.
решил вот так сделать:

Код
<div class="item"><a href="###"><img src="http://cooltermo.ru/images/912.jpg">Заправка автокондиционеров</a></div>
Изображение и текст как ссылка.

Код
.item a {
  display:block;
  height:100%;
}
и стиль ссылки block.

не идеально, но 90% плитки превратилось в ссылку :)

Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Как разместить картинку за текстом в статье?

Автор PNP

Ответов: 11
Просмотров: 1515
Последний ответ 10.08.2021, 20:59:27
от PNP
Как сделать заголовок под картинкой?

Автор seryoga_1985

Ответов: 2
Просмотров: 1002
Последний ответ 26.01.2016, 18:20:47
от seryoga_1985
Обтекание текстом видео

Автор HTR

Ответов: 4
Просмотров: 1615
Последний ответ 26.11.2015, 09:51:23
от HTR
Меню Joomla 3.4.5 с svg картинкой

Автор Alex GOOD

Ответов: 3
Просмотров: 1480
Последний ответ 28.10.2015, 23:26:01
от Shustry
Обтекание картинки текстом и выравнивание блока картинок

Автор zigzagrus

Ответов: 5
Просмотров: 1377
Последний ответ 01.08.2015, 14:08:02
от zigzagrus