Как фоновое изображение дочерних объектов...
Есть такая конструкция
<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 для каждого объекта отдельно. |
В чем проблема? Просто задаете 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>
И нельзя внутрь строковых элементов вкладывать блоки |
Спасибо. Направили на правильную мысль.
Все получилось. Только позиционирование фона каждого из дива отдельно пришлось прописывать для :hover. А как тогда сделать ссылку из блока на другую страницу, без строчных элементов, не в CSS же url писать? |
Честно не знаю. Первое что приходит в голову, используйте событие онклик и js, но это усложнение. Можно вместо блоков использовать спаны А вообще наверно и по вашему можно, просто валидатор будет материться. Если вам валидность важна то выкручивайтесь. Я не очень понимаю зачем она, многие крупные известные ресурсы не валидно сверстаны. Проверьте лицокнигу, контакт. Море ошибок.
|
Тут еще столкнулся с одной проблемой, что то туго соображаю... не могу понять как удобней, а главное кратко написать 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 и позиционирования.:blink: |
| Часовой пояс GMT +3, время: 17:40. |