|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
03.03.2013, 20:50 | #1 |
Пользователь
Регистрация: 05.12.2012
Сообщений: 26
|
"Магия" картинок с применением CSS 3
Задачка: на html-страничке есть картинка (рис. 1), при наведении на которую она превращается несколько картинок (рис. 2)
Предполагается, что происходит "магия" с изменением типа позиционирования при наведении (по :hover): html - код: Код HTML:
<!DOCTYPE HTML> <html> <head> <title>28.02.2013</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="280213.css" media="all"> </head> <body> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> <div class="element"><img src="001.jpg"></div> </body> </html> Код HTML:
.element { width: 300px; height: 225px; position: absolute; margin: 20px 0 0 20px; float: left; } .element:hover { position: relative; margin: 20px 0 0 20px; } |
04.03.2013, 08:45 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Наведение срабатывает на 1 элемент, а не на все с таким же классом.
Используйте наследование. Наведение сработает на родителя и свойства передадутся дочерним элементам.
Alar, верни репу!
|
06.03.2013, 21:50 | #3 |
Пользователь
Регистрация: 05.12.2012
Сообщений: 26
|
если вы имеете в виду:
Код HTML:
<div class="element"> <div><img src="001.jpg"></div> <div><img src="001.jpg"></div> <div><img src="001.jpg"></div> <div><img src="001.jpg"></div> <div><img src="001.jpg"></div> <div><img src="001.jpg"></div> <div><img src="001.jpg"></div> </div> |
06.03.2013, 22:47 | #4 |
Очень суровый
Участник клуба
Регистрация: 17.12.2009
Сообщений: 1,988
|
В той конструкции что у вас + вот это:
Код:
И зачем врапить в div'ы когда можно картинкам задать блочное отображение.
Ненавижу быть как все, но люблю, чтобы все были как я.
|
06.03.2013, 23:14 | #5 |
Пользователь
Регистрация: 05.12.2012
Сообщений: 26
|
очень интересно выходит: margin работает по наведению, а изменение позиционирования - никак ...
|
07.03.2013, 00:53 | #6 |
Очень суровый
Участник клуба
Регистрация: 17.12.2009
Сообщений: 1,988
|
А как вы понимаете, что оно не работает?)
Ненавижу быть как все, но люблю, чтобы все были как я.
|
07.03.2013, 18:06 | #7 |
Пользователь
Регистрация: 05.12.2012
Сообщений: 26
|
отсутствует визуальный эффект =)
|
07.03.2013, 20:02 | #8 |
Очень суровый
Участник клуба
Регистрация: 17.12.2009
Сообщений: 1,988
|
Да неужели. и какой визуальный эффект у абсолютного позиционирования перед родительским?
Ненавижу быть как все, но люблю, чтобы все были как я.
|
08.03.2013, 00:07 | #9 |
Пользователь
Регистрация: 05.12.2012
Сообщений: 26
|
в плане визуального эффекта поставленной задачи =)
вопрос решился по предлагаемому вам варианту, если в классе element убрать height благодарочка вам всем спасибо за обсуждение |
08.03.2013, 15:47 | #10 |
Участник клуба
Регистрация: 23.07.2007
Сообщений: 1,054
|
Навоял на коленке....
Писано по д'Эльфийски
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
"Магия" Ворда | Poma][a | Софт | 8 | 02.12.2012 18:26 |
Создать класс "Фигура", от него наследованием создать 3 класса ("треугольник", "четырехугольник", "окружность") | funnyy | Помощь студентам | 3 | 17.10.2012 17:40 |
Вывести название соответствующей карты вида "шестерка бубен", "дама червей","туз треф" и т.п. | воваава | Помощь студентам | 3 | 01.12.2011 12:50 |
при вводе на листе "магазин"- код товара появлялось "описание" товара из "склада" с "продажной ценой" | aleksei78 | Microsoft Office Excel | 13 | 25.08.2009 12:04 |