CSS problem

[sebik90]

Mam taki kod
CSS
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-spacere;overflow:auto'>.box1, .box2{
position: absolute;
top: 350px;
background-color: #00aeff;
border: 1px solid #0b3c53;
width: 100px;
height: 100px;
}

.master_box:hover .box1, .master_box:hover .box2{
background-color: #f3b08f;
border: 1px solid #d04f10;
}

.box1{ left: 100px}
.box2{ left: 300px;}</div>
HTML
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-spacere;overflow:auto'><div class="master_box">
<div class="box1"></div>
<div class="box2"></div>
</div></div>

jak napisac w css takie cos aby po najechaniu na box1 lub 2 tlo master_box'a zmienilo sie np na pomaranczowe ???

 

[RobertG]

W CSS IMHO nie da się tego uzyskać, można użyć JS:

<div id="master_box">
<div class="box1" onmouseover="document.getElementById('master_box').setAttribute('style','background:red')"></div>
<div class="box2" onmouseover="document.getElementById('master_box').setAttribute('style','background:red')"></div>
</div>

 

[sebik90]

dzieki ale chodzilo mi o to by wyeliminowac javascript (tylko css), i po pewnym czasie udalo mi sie to
<div class='codetop'>CODE</div><div class='codemain' style='height:200px;white-spacere;overflow:auto'>.box1, .box2{
position: absolute;
top: 120px;
background-color: #00aeff;
border: 1px solid #0b3c53;
width: 100px;
height: 100px;
}

.master_box:hover .box1, .master_box:hover .box2{
background-color: #f3b08f;
border: 1px solid #d04f10;
}

.box1{ left: 100px}
.box2{ left: 300px;}

.master_box{
position: absolute;
background-color: #6efc67;
width:100px;
height: 100px;
top:300px;
left:100px;
border: 1px solid #13880d;
}

.master_box:hover {
background-color: #b8489a;
border: 1px solid #b84ccc;
} </div>