X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
> Изменение background-color при наведении курсора
dimjan4
dimjan4
Topic Starter сообщение 30.11.2008, 14:02; Ответить: dimjan4
Сообщение #1


Как изменить background-color при наведении курсора??
Я знаю, что в ссылках просто прописывается

a.link_1:link {color:#FFFEF3; text-decoration:none;}
a.link_1:hover {color:red; text-decoration:none;}
a.link_1:active {color:#FFFEF3; text-decoration:none;}
a.link_1:visited {color:#FFFEF3; text-decoration:none;}


но это в ссылках, а мне надо, чтобы background-color div-a изменялся!:rolleyes:
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Diablo_hb
Diablo_hb
сообщение 30.11.2008, 14:44; Ответить: Diablo_hb
Сообщение #2


на форуме есть много примеров меню где это делается
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimjan4
dimjan4
Topic Starter сообщение 30.11.2008, 15:10; Ответить: dimjan4
Сообщение #3


Я предполагал, что такие темы уже есть, НО я уже " полчаса " ищу и безрезультатно!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Diablo_hb
Diablo_hb
сообщение 30.11.2008, 16:39; Ответить: Diablo_hb
Сообщение #4


Неправильно работает горизонтальное меню
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 1.12.2008, 21:27; Ответить: Exterior
Сообщение #5


<div style="width:200px; height:30px; background:red;" onmouseover="this.style.background='green';" onmouseout="this.style.background='red';">&nbsp;</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Levin_hb
Levin_hb
сообщение 3.3.2010, 14:16; Ответить: Levin_hb
Сообщение #6


(Exterior @ 1.12.2008, 23:27) *
<div style="width:200px; height:30px; background:red;" onmouseover="this.style.background='green';" onmouseout="this.style.background='red';">&nbsp;</div>


Пытаюсь это применить к ячейке, что бы картинка менялась - Не получается :-(

Как сделать что бы при наведении на ячейку картинка background`a менялась???
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 3.3.2010, 15:03; Ответить: Webmaster_hb
Сообщение #7


Levin, лучше разместите в ячейке ссылку A для которой в стилях задайте
display:block

а фоно меняйте тоже в стилях посредством
a:hover
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Levin_hb
Levin_hb
сообщение 3.3.2010, 16:20; Ответить: Levin_hb
Сообщение #8


(Webmaster_hb @ 3.3.2010, 17:03) *
Levin, лучше разместите в ячейке ссылку A


Но тогда все будет применяться только для ссылки, а необходимо изменить фон ячейки, в которой находится ссылка!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 3.3.2010, 17:58; Ответить: Webmaster_hb
Сообщение #9


Levin, при тех параметрах что я указал, ссылка будет занимать всё пространство ячейки таблицы
и визуально не будет никакой разницы

но если же, вы всё-таки прицепились к ячейкам, то можно использовать такой код

<td onmouseover="this.style.backgroundPosition='0 -200px';" onmouseout="this.style.backgroundPosition='0 0';">


в котором вы задаете фоновую картинку, и только меняете ее позицию со смещением
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Levin_hb
Levin_hb
сообщение 3.3.2010, 19:09; Ответить: Levin_hb
Сообщение #10


Да, верно :-)
Это натолкнуло меня на другую мысль.
сделал списком, но честно говоря частично спер, поэтому принцип не совсем понял.
Буду очень признателен если прокомментируете:
Файл CSS

#MainMenu
{
width:210%;
height:112px;
background:#FFF;
border:0;
margin:0;
}

#tab ul
{

list-style:none;
float:left;
margin:0;
padding:0;
}
#tab li
{

display:inline;
float:left;
margin:0;
padding:0;
}
#tab a
{
background:#000 url(картинка в покое);
text-decoration:none;
border:0;
display:block;
float:left;
margin:0;
padding:0;
}
#tab a span
{
display:block;
font-family:Georgia, serif;
font-size:12px;
color:#7f7f7f;
font-weight:700;
width:95px;
line-height:111px;
padding:0 0px;
}
#tab a:hover,#tab li.item_active a
{
background:url(картинка при наведении);
}
#tab a:hover span,#tab li.item_active a span
{
color:#000;
font-weight:700;
font-style:normal;
text-decoration:none;
}
Ну и страница:
<div id="MainMenu" >
<div id="tab" >
<ul>

<li><a href="http:адрес"><span >страница</span></a></li>
<li><a href="http://адрес"><span >страница</span></a></li>
<li><a href="http://сдрес"><span >страница</span></a></li>
<li><a href="http://адрес"><span >страница</span></a></li>
<li><a href="http://адрес"><span >страница</span></a></li>

</ul>
</div>
</div>
в результате список выстраивается горизонтально друг за другом, и у ссылки получается заданный размер. Вот только почему понял не до конца :-(
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
3 страниц V   1 2 3 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
4 stu999 1231 4.3.2024, 20:04
автор: stu999
Открытая тема (нет новых ответов) Получил странную ссылку при линкбилдинге
Как поведет себя поиск при обнаружении странной ссылке?
10 r0mZet 2151 24.10.2022, 19:23
автор: Wachowski
Горячая тема (нет новых ответов) 300 площадок под вечные ссылки на выбор: ТИЦ 20-9400, PR 0-6, ЯК, DMOZ. Скидки при пакетном заказе!
65 inkon 30224 19.7.2022, 13:41
автор: Funoman
Горячая тема (нет новых ответов) тИЦ отменили! Новый показатель Яндекса ИКС! Лучшие площадки под размещение. Бесплатное написание статей при любом заказе.
Эксклюзивное предложение. Успей получить написание статей БЕСПЛАТНО
71 VIMstat 78250 21.6.2022, 9:38
автор: VIMstat
Открытая тема (нет новых ответов) Отображение нужного блока при клике.
0 bhtml 1646 10.7.2020, 15:18
автор: -bhtml-


 



RSS Текстовая версия Сейчас: 19.3.2024, 14:47
Дизайн