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

Как купить рекламу на форуме


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

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

Купить рекламу на форуме 20000 рублей в месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 03.03.2012, 14:42   #1
SNake Ice
Пользователь
 
Аватар для SNake Ice
 
Регистрация: 18.04.2010
Сообщений: 20
По умолчанию css: появление картинок сверху

Есть элемент на странице, это текст, у его css есть свойства :hover и :active. Хочу, чтобы при наведении курсора (:hover) сверху этого текста появлялись две картинки (параллельно), при нажатии на любую из этих картинок был переход по ссылке (не проблема, сделается). Главный вопрос: как сделать, чтобы при наведении появлялись эти две картинки?
SNake Ice вне форума Ответить с цитированием
Старый 03.03.2012, 14:50   #2
acteralex
Форумчанин
 
Регистрация: 19.05.2011
Сообщений: 189
По умолчанию

в ссылку
Код:
<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;
/*и другое*/
}
acteralex вне форума Ответить с цитированием
Старый 03.03.2012, 15:11   #3
SNake Ice
Пользователь
 
Аватар для SNake Ice
 
Регистрация: 18.04.2010
Сообщений: 20
По умолчанию

Извините, ввёл несколько в заблуждение... Картинки можно не отдельно. Объясню на примере: это будет два квадратных изображения со ссылками на сайты. И у меня уже есть стили для a...
SNake Ice вне форума Ответить с цитированием
Старый 03.03.2012, 15:16   #4
acteralex
Форумчанин
 
Регистрация: 19.05.2011
Сообщений: 189
По умолчанию

не совсем понятно... можно на картинке объяснить?
acteralex вне форума Ответить с цитированием
Старый 03.03.2012, 15:31   #5
SNake Ice
Пользователь
 
Аватар для SNake Ice
 
Регистрация: 18.04.2010
Сообщений: 20
По умолчанию


У "купить" уже задан свой стиль, и реализовано изменение при нажатии и наведении. Не реализовано: появления столбика сверху и картинки (вообще не добавлены и теряюсь в какое место их добавлять).
SNake Ice вне форума Ответить с цитированием
Старый 03.03.2012, 15:42   #6
acteralex
Форумчанин
 
Регистрация: 19.05.2011
Сообщений: 189
По умолчанию

Если я понимаю правильно, то при наведении на ссылочку должны появляться картинки.. правильно?
acteralex вне форума Ответить с цитированием
Старый 03.03.2012, 15:46   #7
SNake Ice
Пользователь
 
Аватар для SNake Ice
 
Регистрация: 18.04.2010
Сообщений: 20
По умолчанию

Цитата:
Сообщение от acteralex Посмотреть сообщение
при наведении на ссылочку
В том-то и дело, что это не ссылка и не станет ею, а текст, у которого есть свойства :hover и :active. При неведении должно столбиком сверху появляться две картинки с фоном (у столбика).
SNake Ice вне форума Ответить с цитированием
Старый 03.03.2012, 15:55   #8
acteralex
Форумчанин
 
Регистрация: 19.05.2011
Сообщений: 189
По умолчанию

Код:
<!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> не является ссылкой, а просто текстом

Пойдет?


Последний раз редактировалось acteralex; 03.03.2012 в 15:58. Причина: Решил сделать скрин
acteralex вне форума Ответить с цитированием
Старый 03.03.2012, 16:09   #9
SNake Ice
Пользователь
 
Аватар для SNake Ice
 
Регистрация: 18.04.2010
Сообщений: 20
По умолчанию

У вас работает, всё хорошо, осталось только переделать под свой вариант (что-то перехитрил со структурой и стилями и теперь не появляется) и сделать, чтобы не прыгало.
SNake Ice вне форума Ответить с цитированием
Старый 03.03.2012, 16:12   #10
acteralex
Форумчанин
 
Регистрация: 19.05.2011
Сообщений: 189
По умолчанию

Осталось дело за тобой! Удачи))
acteralex вне форума Ответить с цитированием
Ответ
Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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


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