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

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 03.03.2013, 20:50   #1
alexelev
Пользователь
 
Регистрация: 05.12.2012
Сообщений: 26
Репутация: 10
Лампочка "Магия" картинок с применением 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,809
Репутация: 2359
По умолчанию

Наведение срабатывает на 1 элемент, а не на все с таким же классом.
Используйте наследование. Наведение сработает на родителя и свойства передадутся дочерним элементам.
__________________
Работаю. В этот раз за деньги.
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 06.03.2013, 21:50   #3
alexelev
Пользователь
 
Регистрация: 05.12.2012
Сообщений: 26
Репутация: 10
По умолчанию

если вы имеете в виду:
Код 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
Репутация: 320
По умолчанию

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

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

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

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

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

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

skype: zlojvirus89
Подмигивание

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

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

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


15:07.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.