Форум программистов
 
О проблемах, например, с регистрацией пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail, а тут можно восстановить пароль.

Вернуться   Форум программистов > Web > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Ответ
 
Опции темы
Старый 03.03.2013, 20:50   #1
alexelev
Пользователь
 
Регистрация: 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>
CSS-правила:
Код HTML:
.element
{
	width: 300px;
	height: 225px;
	position: absolute;
	margin: 20px 0 0 20px;
	float: left;
}
.element:hover
{
	position: relative;
	margin: 20px 0 0 20px; 
}
Нужны какие-то идеи почему не получается =)


alexelev вне форума Ответить с цитированием
Старый 04.03.2013, 08:45   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Наведение срабатывает на 1 элемент, а не на все с таким же классом.
Используйте наследование. Наведение сработает на родителя и свойства передадутся дочерним элементам.
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 06.03.2013, 21:50   #3
alexelev
Пользователь
 
Регистрация: 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>
то это тоже не работает
alexelev вне форума Ответить с цитированием
Старый 06.03.2013, 22:47   #4
MyLastHit
Очень суровый
Участник клуба
 
Аватар для MyLastHit
 
Регистрация: 17.12.2009
Сообщений: 1,988
По умолчанию

В той конструкции что у вас + вот это:
Код:
.element:hover div
{
	position: relative;
	margin: 20px 0 0 20px; 
}
Только у меня были кажется какие-то проблемы с данной конструкцией. Уже не помню...
И зачем врапить в div'ы когда можно картинкам задать блочное отображение.
Ненавижу быть как все, но люблю, чтобы все были как я.
MyLastHit вне форума Ответить с цитированием
Старый 06.03.2013, 23:14   #5
alexelev
Пользователь
 
Регистрация: 05.12.2012
Сообщений: 26
По умолчанию

очень интересно выходит: margin работает по наведению, а изменение позиционирования - никак ...
alexelev вне форума Ответить с цитированием
Старый 07.03.2013, 00:53   #6
MyLastHit
Очень суровый
Участник клуба
 
Аватар для MyLastHit
 
Регистрация: 17.12.2009
Сообщений: 1,988
По умолчанию

А как вы понимаете, что оно не работает?)
Ненавижу быть как все, но люблю, чтобы все были как я.
MyLastHit вне форума Ответить с цитированием
Старый 07.03.2013, 18:06   #7
alexelev
Пользователь
 
Регистрация: 05.12.2012
Сообщений: 26
По умолчанию

отсутствует визуальный эффект =)
alexelev вне форума Ответить с цитированием
Старый 07.03.2013, 20:02   #8
MyLastHit
Очень суровый
Участник клуба
 
Аватар для MyLastHit
 
Регистрация: 17.12.2009
Сообщений: 1,988
По умолчанию

Да неужели. и какой визуальный эффект у абсолютного позиционирования перед родительским?
Ненавижу быть как все, но люблю, чтобы все были как я.
MyLastHit вне форума Ответить с цитированием
Старый 08.03.2013, 00:07   #9
alexelev
Пользователь
 
Регистрация: 05.12.2012
Сообщений: 26
По умолчанию

в плане визуального эффекта поставленной задачи =)
вопрос решился по предлагаемому вам варианту, если в классе element убрать height
благодарочка вам
всем спасибо за обсуждение
alexelev вне форума Ответить с цитированием
Старый 08.03.2013, 15:47   #10
Лубышев
Участник клуба
 
Аватар для Лубышев
 
Регистрация: 23.07.2007
Сообщений: 1,053
Подмигивание

Навоял на коленке....
Вложения
Тип файла: zip магия картинок.zip (18.7 Кб, 6 просмотров)
Писано по д'Эльфийски
Лубышев вне форума Ответить с цитированием
Ответ

Здесь нужно купить рекламу за 20 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru
Без учёта ботов - 20000 человек в день, 350000 в месяц.

Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
"Магия" Ворда 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


Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru
Пеллетный котёл Emtas
котлы EMTAS