Class 如何一次运行多个css选择器类？

我是网页设计新手，我正在做一个小项目，但我遇到了一个问题，我希望能得到任何帮助

所以我有三个div容器，我用它们来显示相册中照片的缩略图，我给了它们每个一个CSS:hover选择器，我希望当鼠标悬停在任何一个div上时，这三个类同时运行。我试图模拟mouseover事件，但它不起作用，我试图用javascript设置属性也不起作用。这是我的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);
}

---

如果你不明白我想要什么，我可以解释得更多。

仅在CSS上无法做到这一点。悬停不适用于DIV。它适用于A，UL>LI

您必须了解Javascript或jQuery

将鼠标悬停在1个div上，然后将$.AddClass（活动类）用于所有div，当鼠标移出div时，将$.RemoveClass用于所有div

如果您不了解jQuery或Javascript，可以在这里询问，我们可以提供帮助

您可以复制和粘贴它的DIv2和Div3关于鼠标移出和过。如果您了解DOM，可以尝试$（“div[name=3DIV]”）。对于较短的代码，但是我不确定你是否理解脚本，所以我发布了简单的脚本，但很长的代码

<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>

$（文档）.ready（函数（）{
$（“#divID1”）.mouseover（函数（）{
$（“#divID1”）.addClass（“活动#u类”）；
$（“#divID2”）.addClass（“活动#u类”）；
$（“#divID3”）.addClass（“活动#u类”）；
});
$（“#divID1”）.mouseout（）（函数（）{
$（“#divID1”）.removeClass（“活动#u类”）；
$（“#divID2”）.removeClass（“活动#u类”）；
$（“#divID3”）.removeClass（“活动#u类”）；
});
}); 

请同时发布您的HTML。我知道一些javascript，但我是新手，如果您提供代码，我将不胜感激。请将ACTIVE_类更改为HOVER类。以及divID1、divID2、divID3到您的DIV ID名称。如果您想要更短的代码，请使用Jquery，并将DOM like:和divID1、divID2、divID3作为divid名称。如果希望代码更短，请将Jquery与DOM一起使用，如：$（“div[name='div\u name']）$（“div[any_attribute='value']）。但请确保div_name和3个div上的值相同。