2011-07-09 4 views
0

私は会場の記録のテーブルを持っていて、各会場はページ上に完全に配置された地図アイコンを持っています(各レコードの上と下の整数フィールドを使用しています)。親をホバリングするときに、どのようにスタイルを子divに追加できますか?

各会場は、各会場アイコンが主要部分から離れて表示された地図上に部分的にインデックスページに表示されます。 (全てのパーシャルは、スクリーンの一方の側に、グリッド形式で示され、すべてのマップアイコンが画面の反対側のPNGマップ上に示されている。)

<%= link_to venue do %> 
    <div class="venue_partial"> 

    <div class="venue_icon"> 
     <%= image_tag venue.venuetype.icon.url(:thumb), :class => 'image' %> 
    </div> 

    <span class="venue_partial_name"><%= venue.name %></span> 

    <div id="venue_map_icon_<%= venue.id %>" style="position:absolute;" class="mapicon"> <%= image_tag (venue.venuetype.mapicon.mapicon.url(:mapicon)) %></div> 
    </div> 
<% end %> 

<script type="text/javascript"> 
    document.getElementById("venue_map_icon_<%= venue.id %>").style.left= "<%= venue.iconleftpx %>px"; 
    document.getElementById("venue_map_icon_<%= venue.id %>").style.top= "<%= venue.icontoppx %>px"; 
</script> 

部分

会場venue partialには背景色を変更するホバースタイルがあります。会場の地図アイコンの上にマウスを置くと、主要部分の背景色が予想どおりに変化します。

しかし、メインの部分にマウスを乗せたときにマップアイコンのスタイルを変更するにはどうすればよいですか?

各マップのアイコンは.mapclassあり:ホバースタイルをしかし、部分的にはその中に座ってアイコンの上にいないホバリング時にのみアクティブになり、そのははるかに高く評価任意の助け

感謝を!

答えて

5

CSS:

.parent:hover .child { 
    /* child style */ 
} 
+0

どうもありがとうございました!それは素晴らしい、私はそれがもっとトリッキーな何かされていると思っていた。 – Dave

関連する問題