一度に複数のCSSセレクタークラスを実行するには？

Question

私はウェブデザインを初めて使い、小規模なプロジェクトに取り組んでいますが、私は問題に直面しており、何か助けていただければ幸いです。

私は3つのdivコンテナを持っています。アルバムの中にサムネイルの写真を表示するためにそれらを使用しています。私はそれらのそれぞれにCSSを与えました：ホバーセレクタと3つのクラスを同時に実行するマウスが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の中にマウスが移動すると、すべての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>