Есть такая конструкция
<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 для каждого объекта отдельно.