如何一次運行多個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>