How to run multiple css selector classes at once? - class

Question

I'm new to web design and I'm working on a small project, but I'm faced with a problem and I would appreciate any help.
So I have three div containers and I'm using them to show thumbnails of photos inside an album and I've given each one of them a CSS :hover selector and I want all three classes to run at once when the mouse is over any one of the divs. I tried to simulate a mouseover event but it didn't work and I tried to setattribute with javascript didn't work either. Here is my css.
#frame {
border: solid 2px black;
background-image:url(cpHDFLI6_mini.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:183px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
transform: rotate(30deg);
}
#frame1 {
border: solid 2px black;
background-image:url(20397.jpg);
background-repeat:no-repeat;
position:absolute;
top:75px;
right:228px;
left:auto;
display: block;
width: 60px;
height: 70px;
z-index:1;
}
#frame2 {
border: solid 2px black;
background-image:url(candle.jpg);
background-repeat:no-repeat;
position:absolute;
top:87px;
right:273px;
left:auto;
display: block;
width: 60px;
height: 70px;
-o-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
transform: rotate(-30deg);
z-index:0;
}
#frame2:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame1:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
#frame:hover {
opacity: 1;
-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom,
from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
-webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}
If you don't understand what I want I can explain more.

Answer 1

NO Way to do it on CSS only. And Hover is not apply for DIV. Its for A, UL > LI...
You must know about Javascript or jQuery.
Mouse hover on 1 div then $.AddClass ( Active Class ) for ALL DIVS, and When Mouse Out of Div, $.RemoveClass for ALL DIVS.
If you don't know about jQuery or Javascript, you can ask here, we can help.
You can copy and paste it for DIv2 and Div3 about mouse move out and over too. If you understand on DOM, you can try $("div[name=3DIV]"). for shorter code , however I am not sure u understand the script or not, so I posted simple script but long code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" /></script>
<script language="javascript">
$(document).ready(function() {
$("#divID1").mouseover(function() {
$("#divID1").addClass("ACTIVE_CLASS");
$("#divID2").addClass("ACTIVE_CLASS");
$("#divID3").addClass("ACTIVE_CLASS");
});
$("#divID1").mouseout()(function() {
$("#divID1").removeClass("ACTIVE_CLASS");
$("#divID2").removeClass("ACTIVE_CLASS");
$("#divID3").removeClass("ACTIVE_CLASS");
});
});
</script>