CSS語法問題

問題：在Mozilla Firefox能正常顯示，但是在Chrome就無法觸發 "hover"！
附上有問題的部分了，請為各為前輩指點。

div在這邊無法打出來，有另外附上網址

Html

code


<style type="text/css">

#header{
width: 100%;
height: 500px;
}

.h1{
top: 30px;
left:30px;
position: absolute;
width: 300px;
height: 220px;
opacity:0.5;
background-color:#58F239;
float:left;
}

.h2{
top: 30px;
left:330px;
position: absolute;
width: 300px;
height: 220px;
opacity:0.5;
background-color:#1258f9;
float:left;
}

.h3{
top: 30px;
left:630px;
position: absolute;
width: 300px;
height: 220px;
opacity:0.5;
background-color:#5398F2;
float:left;
}


#header .h1:hover .h11{
top: -8px;
left:-8px;
position:absolute;
width: 298px;
height: 218px;

border:solid 10px rgba(88, 88, 88);
float:left;
}

#header .h2:hover .h22{
top: -8px;
left:-8px;
position:absolute;
width: 298px;
height: 218px;

border:solid 10px rgba(88, 88, 88);
float:left;
}

#header .h3:hover .h33{
top: -8px;
left:-8px;
position:absolute;
width: 298px;
height: 218px;

border:solid 10px rgba(88, 88, 88);
float:left;
}
</style>