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

Question

我是新来的网页设计，我正在做一个小项目，但我面临一个问题，我会很感激任何帮助。

所以我有三个div容器，我使用它们来显示相册内的照片缩略图，并且我已经给每个人一个CSS：悬停选择器，我希望所有三个类一次运行鼠标在任何一个div上。我试图模拟一个mouseover事件，但它没有工作，我试图使用JavaScript setattribute也没有工作。这是我的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上做。并且悬停不适用于DIV。它适用于A，UL> LI ...

您必须了解Javascript或jQuery。

将鼠标悬停在1 div上，然后为所有DIVS添加$ .AddClass（活动类），并且当鼠标移出Div时，$ .RemoveClass适用于所有DIVS。

如果你不知道关于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>