css: появление картинок сверху - HTML и CSS

SNake Ice · 03.03.2012, 15:42

Есть элемент на странице, это текст, у его css есть свойства :hover и :active. Хочу, чтобы при наведении курсора (:hover) сверху этого текста появлялись две картинки (параллельно), при нажатии на любую из этих картинок был переход по ссылке (не проблема, сделается). Главный вопрос: как сделать, чтобы при наведении появлялись эти две картинки?

acteralex · 03.03.2012, 15:50

в ссылку

Код:

<a href="bla-bla-bla">вот здесь текст, над которым будет вставляться картинки<div class="picture_1"></div><div class="picture_2"></div></a>

CSS

Код:

div.picture_1, div.picture_2{
 display:none;
/*здесь ещё задаете позиционирование абсолютное, высоту, ширину... Можно их поотдельности*/
}
a:link{
/*пеерчисляете что вам нужно для текста*/
}
a:hover div.picture_1{
position:absolute;
display:block;
/*и другое*/
}
a:hover div.picture_2{
position:absolute;
display:block;
/*и другое*/
}

SNake Ice · 03.03.2012, 16:11

Извините, ввёл несколько в заблуждение... Картинки можно не отдельно. Объясню на примере: это будет два квадратных изображения со ссылками на сайты. И у меня уже есть стили для a...

acteralex · 03.03.2012, 16:16

не совсем понятно... можно на картинке объяснить?

SNake Ice · 03.03.2012, 16:31

У "купить" уже задан свой стиль, и реализовано изменение при нажатии и наведении. Не реализовано: появления столбика сверху и картинки (вообще не добавлены и теряюсь в какое место их добавлять).

acteralex · 03.03.2012, 16:42

Если я понимаю правильно, то при наведении на ссылочку должны появляться картинки.. правильно?

SNake Ice · 03.03.2012, 16:46

Цитата:

Сообщение от acteralex

при наведении на ссылочку

В том-то и дело, что это не ссылка и не станет ею, а текст, у которого есть свойства :hover и :active. При неведении должно столбиком сверху появляться две картинки с фоном (у столбика).

acteralex · 03.03.2012, 16:55

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Документ без названия</title>
<style>
body{
	padding:50px;
}
div.one{
	background-color:#009;
	width:15px;
	height:15px;
	display:none;
}
div.two{
	background-color:#096;
	width:15px;
	height:15px;
	display:none;
}
a:hover div{
	display:block;
	color:#FFF;
}
</style>
</head>
<body>
<a><div class="one"></div><div class="two"></div>Вот ссылка</a>	
</body>

Здесь тэг <a> не является ссылкой, а просто текстом

Пойдет?

SNake Ice · 03.03.2012, 17:09

У вас работает, всё хорошо, осталось только переделать под свой вариант (что-то перехитрил со структурой и стилями и теперь не появляется) и сделать, чтобы не прыгало.

acteralex · 03.03.2012, 17:12

Осталось дело за тобой! Удачи))

03.03.2012, 15:42	#1
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	css: появление картинок сверху Есть элемент на странице, это текст, у его css есть свойства :hover и :active. Хочу, чтобы при наведении курсора (:hover) сверху этого текста появлялись две картинки (параллельно), при нажатии на любую из этих картинок был переход по ссылке (не проблема, сделается). Главный вопрос: как сделать, чтобы при наведении появлялись эти две картинки?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Появление картинок на форме.	Loadgame	Помощь студентам	3	15.11.2011 23:30
Плавное появление css градиента(Jquery)	ZvEr_HaCkEr	JavaScript, Ajax	8	11.06.2011 10:15
Добавление строк сверху-вниз	Rapala	Общие вопросы Delphi	6	30.04.2010 18:50
Форма всегда сверху(always onTop)	KiDoki	Общие вопросы Delphi	7	14.12.2008 12:03
Сверху\снизу	Marsik	Помощь студентам	11	03.11.2007 13:33

03.03.2012, 16:11	#3
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	Извините, ввёл несколько в заблуждение... Картинки можно не отдельно. Объясню на примере: это будет два квадратных изображения со ссылками на сайты. И у меня уже есть стили для a...

03.03.2012, 16:16	#4
acteralex Форумчанин Регистрация: 19.05.2011 Сообщений: 189	не совсем понятно... можно на картинке объяснить?

03.03.2012, 16:31	#5
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	У "купить" уже задан свой стиль, и реализовано изменение при нажатии и наведении. Не реализовано: появления столбика сверху и картинки (вообще не добавлены и теряюсь в какое место их добавлять).

03.03.2012, 16:42	#6
acteralex Форумчанин Регистрация: 19.05.2011 Сообщений: 189	Если я понимаю правильно, то при наведении на ссылочку должны появляться картинки.. правильно?

03.03.2012, 17:09	#9
SNake Ice Пользователь Регистрация: 18.04.2010 Сообщений: 20	У вас работает, всё хорошо, осталось только переделать под свой вариант (что-то перехитрил со структурой и стилями и теперь не появляется) и сделать, чтобы не прыгало.

03.03.2012, 17:12	#10
acteralex Форумчанин Регистрация: 19.05.2011 Сообщений: 189	Осталось дело за тобой! Удачи))