Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.04.2011, 18:31
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

Как фоновое изображение дочерних объектов...
Есть такая конструкция
<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 для каждого объекта отдельно.
Ответить с цитированием
  #2 (permalink)  
Старый 07.04.2011, 03:17
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

В чем проблема? Просто задаете background-image отдельным свойством а не в общем свойстве background, затем по hover На родителе меняете во всех дивах background-image, никакого js не надо, вот пример, но я меняю цвет фона, просто суть
<style>
	.p{
		padding: 20px;
		border: 1px solid red;
	}
	.p:hover .c1, .p:hover .c2{
		background-color: red;
	}
	.c{
                background-color:green;
		padding:20px;
		margin-bottom: 10px;
	}
</style>
<div class = "p">
	<div class = "c c1"></div>
	<div class = "c c2"></div>

</div>

И нельзя внутрь строковых элементов вкладывать блоки
__________________
readOnly
Ответить с цитированием
  #3 (permalink)  
Старый 07.04.2011, 17:52
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

Спасибо. Направили на правильную мысль.
Все получилось. Только позиционирование фона каждого из дива отдельно
пришлось прописывать для :hover.

А как тогда сделать ссылку из блока на другую страницу, без строчных элементов, не в CSS же url писать?
Ответить с цитированием
  #4 (permalink)  
Старый 07.04.2011, 22:11
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Честно не знаю. Первое что приходит в голову, используйте событие онклик и js, но это усложнение. Можно вместо блоков использовать спаны А вообще наверно и по вашему можно, просто валидатор будет материться. Если вам валидность важна то выкручивайтесь. Я не очень понимаю зачем она, многие крупные известные ресурсы не валидно сверстаны. Проверьте лицокнигу, контакт. Море ошибок.
__________________
readOnly
Ответить с цитированием
  #5 (permalink)  
Старый 11.04.2011, 18:52
Аспирант
Отправить личное сообщение для DDSSDD Посмотреть профиль Найти все сообщения от DDSSDD
 
Регистрация: 06.04.2011
Сообщений: 53

Тут еще столкнулся с одной проблемой, что то туго соображаю... не могу понять как удобней, а главное кратко написать 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 и позиционирования.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как заставить браузер использовать закэшированное изображение? fog Общие вопросы Javascript 5 13.08.2009 15:40
Как предварительно загруженное изображение сделать бэкграундом? hrundel Общие вопросы Javascript 1 02.08.2009 12:45
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 23:20
ООП: как создавать наследника от встроенных объектов? Langalier Общие вопросы Javascript 17 02.02.2009 17:07
Как определить включен ли поддержака объектов ActoveX feodul Events/DOM/Window 5 02.06.2008 12:04