Перейти к содержимому

MOAB

- - - - -

Помогите по верстке hover


  • Войдите, чтобы ответить
Сообщений в теме: 5

#1 isay777

isay777

    смурфосеошнег

  • Модератор
  • PipPipPipPipPip
  • 2 276 сообщений
2 415
  • ИзМосква

Отправлено 10 Ноябрь 2014 - 23:27

Не могу найти что-то полу готовое для вывода div при наезде на картинку.
В общем хочется как тут http://nasocks.ru/tr...in-129;pmax-763 при наведении на товар вылезает див.
Причем крайне правый вылезает слева.

Просто все то что в сети по ховеру это сверстано внутри самой картинки а не рядом.
мое портфолио - Дешевый и надежный хостинг c SSD --- СНИМАЕМ ПОЗИЦИИ ЧЕТКО

#2 reklamarabotaet

reklamarabotaet

    designing own future

  • Активный участник
  • PipPipPipPip
  • 1 029 сообщений
732
  • Google+
  • ИзСанкт-Петербург

Отправлено 11 Ноябрь 2014 - 01:19

А прямо на том же сайте вроде что-то видно же:
a_pr_hover
hide_detail
надо смотреть подробнее...

Все же магазины такие наплывы делають...


Изображение

#a_pr_hover.a_pr_item .hide_detail {
	display: block;
}
/*.a_pr_item h5 {
	margin-left: -15px;
}
.a_pr_item .price_container {
	margin-left: -15px;
}*/
.hide_detail {
	display: none;
}
.views_detail {
	float: left;
	height: 100%;
	margin: 0 10px 0 0 !important;
	padding: 0 !important;
	position: absolute;
	top: 0;
	width: 0;
}
.views_detail > div {
	background: none repeat scroll 0 0 #FFFFFF;
	border-bottom: 3px solid #000000;
	border-left: 3px solid #000000;
	border-top: 3px solid #000000;
	float: left;
	height: 100%;
	left: -64px;
	position: relative;
	top: -3px;
	box-shadow: -2px 1px 2px -2px #999999;
}

position:relative





.a_pr_detail {
background: none repeat scroll 0 0 #FFFFFF;
border: 3px solid #000000;
float: left;
padding: 10px 20px 7px 14px;
position: relative;
top: 0;
margin-left: 12px;
width: 168px;

}

Сообщение отредактировал reklamarabotaet: 11 Ноябрь 2014 - 01:20

Веб-дизайн, проектирование UX/UI интернет-магазинов, веб-сервисов. Сайты под ключ. Курсы создания сайтов без программирования, веб-дизайна в PS, AI, Figma, контекстной рекламы.

#3 mrZer0

mrZer0

    Лентяй

  • Основатель
  • PipPipPip
  • 386 сообщений
850
  • ИзВологды

Отправлено 11 Ноябрь 2014 - 10:45

Чтобы что-то появлялось при наезде на объект - делаем как-то так:
<div class="item"><img src="fotka" /><div class="moreinfo">sdfsdfsdf</div></div>
.item .moreinfo{
display: none;
}
.item:hover .moreinfo{
display: block;
}
Ну и соответственно блок .moreinfo нужно отпозиционировать как нужно с помощью position: relative; top: XXX; left: XXX; z-index: 9999; width: XXX; height: XXX и так далее... точнее только на живом примере...

#4 isay777

isay777

    смурфосеошнег

  • Модератор
  • PipPipPipPipPip
  • 2 276 сообщений
2 415
  • ИзМосква

TC Отправлено 11 Ноябрь 2014 - 15:16

Это все не совсем то. Я пробовал получается довольно криво.
Хотелось что-то более или менее шаблонное.
Спасибо всем за ответы
мое портфолио - Дешевый и надежный хостинг c SSD --- СНИМАЕМ ПОЗИЦИИ ЧЕТКО

#5 mrZer0

mrZer0

    Лентяй

  • Основатель
  • PipPipPip
  • 386 сообщений
850
  • ИзВологды

Отправлено 11 Ноябрь 2014 - 17:43

Просмотр сообщенияisay777 (11 Ноябрь 2014 - 15:16) писал:

Это все не совсем то. Я пробовал получается довольно криво.
Хотелось что-то более или менее шаблонное.
Спасибо всем за ответы
это именно то, просто нужно допиливать позиционирование...

#6 isay777

isay777

    смурфосеошнег

  • Модератор
  • PipPipPipPipPip
  • 2 276 сообщений
2 415
  • ИзМосква

TC Отправлено 12 Ноябрь 2014 - 02:44

Спасибо ребза
Совсем забыл что в моем любимом uikit все есть http://getuikit.com/...ility-utilities

Изображение
мое портфолио - Дешевый и надежный хостинг c SSD --- СНИМАЕМ ПОЗИЦИИ ЧЕТКО




Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 анонимных



© 2019 SMO&SEO форум «WEBIMHO» — продвижение и создание сайтов, интернет-маркетинг

По вопросам рекламы на форуме и цены на рекламу
Все материалы SEO форума разрешены к копированию только с установкой гиперактивной ссылки на webimho.ru,
тем, кто этого не сделает, мы оторвем руки и ноги и поменяем местами,
а когда выйдем из тюрьмы, опять оторвем и опять поменяем.


Россия, г. Москва

Мы в соцсетях: twitter | вконтакте | facebook | livejournal