Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Единый форум поддержки » Корзина » превью при наведении

превью при наведении

Страница: 1

Сообщений 1 страница 3 из 3

1

  • Автор: Aira
  • Заслуженный
  • Aira
  • Зарегистрирован: Вс, 21 Авг 2011
  • Сообщений: 86
  • Уважение: 0
  • Позитив: +17
  • Последний визит:
    Пн, 1 Дек 2014 23:25:54

подскажите как сделать превью при наведении на изображение,
пример: http://unmasked.rusff.ru/ (изображения в таблице)

0

2

  • Автор: Romych
  • drumman
  • Romych
  • Зарегистрирован: Вт, 16 Дек 2008
  • Сообщений: 2711
  • Уважение: +4118
  • Позитив: +2396
  • Пол: Мужской
  • Последний визит:
    Пт, 3 Янв 2025 13:21:24
Aira написал(а):

подскажите как сделать превью при наведении на изображение,
пример: http://unmasked.rusff.ru/ (изображения в таблице)

если рассматривать конкретный приведённый вами пример, то в нём сделано всё таким способом:
там создан список, которому присвоен класс hoverbox, в списке ссылки на профиль видимо администраторов, в каждой ссылке содержатся 2 избражения, одно которое мы видим сразу, размером 40х40, второе размером 100х100 невидимое (имеет свойство display: none;) до тех пор, пока мы не наведём на первое изображение курсор тогда вступает в силу метод (:hover) и позиционируется второе изображение поверх первого, т.е. становится видимым и перекрывает его (display: block; z-index: 1;), второму изображению присвоен класс preview

<ul class="hoverbox">
<li>
<a href="http://unmasked.rusff.ru/profile.php?id=12">
<img border="0" src="http://www.10pix.ru/img1/897637/7786326.png"> <!-- тут первое изображение 40х40 -->
<img border="0" src="http://www.10pix.ru/img1/1864/7786325.png" class="preview"> <!-- тут второе изображение 100х100 -->
</a>
</li>
</ul>

и свойства стиля для данного кода

<style type="text/css">
.hoverbox 
{cursor: default;  list-style: none;  margin-left:100px;} 

.hoverbox a 
{cursor: default;margin-left:-10px;} 

.hoverbox a .preview 
{display: none;} 

.hoverbox a:hover .preview 
{display: block;  position: absolute; top: 0px; left: -24px; z-index: 1;} 

.hoverbox img
{color:inherit; padding: 0px; vertical-align: top;} 

.hoverbox li 
{color: inherit; display: inline;  float: left; margin: 3px; padding: 3px;  position: relative;} 
</style>

Отредактировано Romych (Чт, 31 Май 2012 00:28:56)

0

3

  • Автор: Aira
  • Заслуженный
  • Aira
  • Зарегистрирован: Вс, 21 Авг 2011
  • Сообщений: 86
  • Уважение: 0
  • Позитив: +17
  • Последний визит:
    Пн, 1 Дек 2014 23:25:54

Romych
спасибо

0

Страница: 1

Вы здесь » Единый форум поддержки » Корзина » превью при наведении