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



 

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

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

Открыть тему
Тема закрыта
> Одновременное изменение background дочерних объектов
DDSSDD
DDSSDD
Topic Starter сообщение 6.4.2011, 18:38; Ответить: DDSSDD
Сообщение #1


Есть такая конструкция
<a href="1.html">
<div id="left">
<div class="csbox4">
<div class="cssbox_head_3 h2_3">
<h2 ></h2>
</div>
<div class="cssbox_body_3">
<p> </p>
<p></p>
</div>
</div>
</div>
</a>


CSS
#left {
position:absolute;
top: 0px;
left: 4px;
margin:0;
padding:0;
width: 250px;
float:left;
z-index:4;
}

.cssbox_body_3, .cssbox_head_3,.cssbox_head_3 h2, .csbox_3, .csbox4 {
background:url(images/Box_center.png) no-repeat bottom right;
}
.csbox4, {
width: 250px;
width: 250px;
padding-right: 11px;
margin: 1px auto;
}
.cssbox_head_3 {
background-position: top right;
margin-right: -11px;
padding-right: 40px;
text-decoration: none;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
color: #E7C374;
font-size: 16px;
}
.cssbox_head_3 h2{
background-position: top left;
margin: 0;
border: 0;
padding: 30px 0 0px 40px;
height: 1%;

}
.cssbox_body_3 {
background-position: bottom left;
margin-right: 25px;
padding: 1px 0 15px 30px;
text-align: justify;
font-size: 13px;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Представляет собой масштабируемый бокс с фоновым изображением.
Фоновое изображение одно для всех дивов, но в каждом из них имеет свое позиционирование.
Задача: при наведении мыши на бокс должно меняться фоновое изображение во всех дивах, сохраняя позиционирование.
Через :hover фон меняется, но в каждом диве.
Нужно именно, что бы фон менялся сразу во всех элементах конструкции при наведении на любой див, при этом сохраняя позиционирование background для каждого объекта отдельно.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 6.4.2011, 19:43; Ответить: hisbvdis
Сообщение #2


Можешь скинуть архив вместе с картинкой, чтобы можно было разглядеть, что там за структура у тебя.
Я бы попытался скриптом сделать.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DDSSDD
DDSSDD
Topic Starter сообщение 7.4.2011, 15:42; Ответить: DDSSDD
Сообщение #3


(hisbvdis @ 6.4.2011, 22:43) *
Можешь скинуть архив вместе с картинкой, чтобы можно было разглядеть, что там за структура у тебя.
Я бы попытался скриптом сделать.


В прикрепленном файле.
Скриптом не очень хотелось бы. Идеально было бы средствами CSS.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 7.4.2011, 16:39; Ответить: hisbvdis
Сообщение #4


Добавьте в CSS эти строки.
Этого Вы хотели?
a:hover .cssbox_body_3{
background-image:url(images/Box_center_kk.jpg);
}
a:hover .cssbox_head_3 h2{
background-image:url(images/Box_center_kk.jpg);
}

По-моему, эти правила можно записать в одно, но совсем вылетело из головы, как это сделать.
Если кто-то знает, был бы благодарен за подсказку.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 7.4.2011, 16:41; Ответить: hisbvdis
Сообщение #5


Нет, наверное Вы хотели так (эти строки вместо предыдущих добавить в CSS):

[CSS]
a:hover .cssbox_body_3{
background-image:url(images/Box_center_kk.jpg);
}
a:hover .cssbox_head_3 h2{
background-image:url(images/Box_center_kk.jpg);
}
a:hover .cssbox_head_3{
background-image:url(images/Box_center_kk.jpg);
}
a:hover .csbox4{
background-image:url(images/Box_center_kk.jpg);
}
[/CSS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 7.4.2011, 17:57; Ответить: pavelsc
Сообщение #6


hisbvdis, через запятую, как делал топикстартер в первом посте, только hover к ссылке добавить =) В итоге будет так:
a:hover .cssbox_body_3, a:hover .cssbox_head_3, a:hover .cssbox_head_3 h2, a:hover .csbox_3, a:hover .csbox4
{background:url(images/Box_center.png) no-repeat bottom right;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DDSSDD
DDSSDD
Topic Starter сообщение 7.4.2011, 18:02; Ответить: DDSSDD
Сообщение #7


Все получилось - подсказали на другом форуме. Как то сам не смог додуматься.
Все выглядит вот так:
#left:hover .csbox4, #left:hover .cssbox_head_3, #left:hover .cssbox_head_3 h2, #left:hover .cssbox_body_3 { background:url(images/Box_center_kk.jpg) no-repeat bottom right;
}

#left:hover .cssbox_body_3 {
background-position: bottom left;
margin-right: 25px;
padding: 1px 0 15px 30px;
text-align:center;
font-size: 18px;
color: #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration:none;
}
#left:hover .cssbox_head_3 h2 {
background-position: top left;
margin: 0;
border: 0;
padding: 30px 0 0px 40px;
height: 1%;

}
#left:hover .cssbox_head_3 {
background-position: top right;
margin-right: -11px;
padding-right: 40px;
text-decoration: none;
text-align:center;
font-family: Arial, Helvetica, sans-serif;
color: #E7C374;
font-size: 16px;
}
#left:hover .csbox4{
width: 250px;
width: 250px;
padding-right: 11px;
margin: 1px auto;
}


Прикрепил файл с исправлениями.
Ваш вариант тоже должен работать, вот только нельзя внутрь строковых элементов вкладывать блоки.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
hisbvdis
hisbvdis
сообщение 7.4.2011, 18:11; Ответить: hisbvdis
Сообщение #8


(pavelsc @ 7.4.2011, 20:57) *
hisbvdis, через запятую, как делал топикстартер в первом посте, только hover к ссылке добавить =) В итоге будет так:
a:hover .cssbox_body_3, a:hover .cssbox_head_3, a:hover .cssbox_head_3 h2, a:hover .csbox_3, a:hover .csbox4
{background:url(images/Box_center.png) no-repeat bottom right;
}


У меня просто что-то не получилось - вот я и засомневался. Спасибо.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pavelsc
pavelsc
сообщение 7.4.2011, 18:54; Ответить: pavelsc
Сообщение #9


(DDSSDD @ 7.4.2011, 21:02) *
Прикрепил файл с исправлениями.
Ваш вариант тоже должен работать, вот только нельзя внутрь строковых элементов вкладывать блоки.

Нельзя, но если плевать на валидность, то ничего не мешает так поступать. Я бы так сделал:
<div onClick="document.location.href=1.html">
<div id="left">
<div class="csbox4">
<div class="cssbox_head_3 h2_3">
<h2 ></h2>
</div>
<div class="cssbox_body_3">
<p> </p>
<p></p>
</div>
</div>
</div>
</div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
DDSSDD
DDSSDD
Topic Starter сообщение 11.4.2011, 18:55; Ответить: DDSSDD
Сообщение #10


Тут еще столкнулся с одной проблемой, что то туго соображаю... не могу понять как удобней, а главное кратко написать CSS:
Та же ситуация, что описана мной выше, где блоку с ID left присваивается background по событию :hover и затем этот фон присваивается всем дочерним объектам блока left с определенным позиционированием.
Только вот блоков у меня 5 и выше одинаковых, но с разными ID. Фон у них должен меняться так же как и блока left.
Как кратко написать CSS, пример:
#left:hover .csbox4, #left:hover .cssbox_head_3, #left:hover .cssbox_head_3 h2, #left:hover .cssbox_body_3 { background:url(images/Box_center_blu4.png) no-repeat bottom right;
}



Как коротко дописать #right, #top и др.
Так же нужно учесть, что вложенные в них блоки типа:
.cssbox_head_3....
.cssbox_body_3



имеют другие названия.
Не писать же для каждого блока отдельно CSS для background и позиционирования.[IMG]http://javascript.ru/forum/images/smilies/blink.gif[/IMG]

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменение дизайна шаблона Joomla
0 neesupermario 1816 3.1.2018, 15:20
автор: neesupermario
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменение шрифта в placeholder
6 Alexej_mw 2461 24.8.2017, 12:10
автор: Alexej_mw
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыИзменение цвета в шаблоне
18 shulz 3167 5.12.2016, 17:11
автор: shulz
Открытая тема (нет новых ответов) Изменение адресов у большого количества страниц
8 ToshuK 2585 1.8.2016, 14:07
автор: WoWeb
Открытая тема (нет новых ответов) Изменение внешнего вида элементов
0 vantusxyz 5934 26.6.2016, 1:03
автор: -vantusxyz-


 



RSS Текстовая версия Сейчас: 19.4.2024, 16:22
Дизайн