Как фоновое изображение дочерних объектов...
Есть такая конструкция
<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, время: 05:07. |