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

Question

我是网页设计的新手，我正在做一个小元素，但我遇到了一个问题，我将不胜感激任何帮助。

所以我有三个 div 容器，我用它们来显示相册中照片的缩略图，我给每个容器一个 CSS :hover 选择器，我希望所有三个类在鼠标悬停时同时运行位于任何一个 div 之上。我试图模拟一个鼠标悬停事件，但它没有用，我试图用 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);
}

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

Answer 1

没有办法只在 CSS 上做到这一点。而 Hover 不适用于 DIV。它适用于 A、UL > LI...

您必须了解 Javascript 或 jQuery。

鼠标悬停在 1 个 div 上，然后为所有 DIVS 移动 $.AddClass(Active Class)，当鼠标悬停在 Div 上时，为所有 DIVS 移动 $.RemoveClass。

如果您不了解 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>