懸停父級時如何向子級 div 添加樣式？

Question

我有一個場地記錄表，每個場地都有一個絕對位於頁面上的 map 圖標（使用每個記錄的頂部和左側 integer 字段）。

每個場館在索引頁面上顯示為一個部分，每個場館圖標都顯示在遠離主要部分的 map 上。 （所有部分都以網格樣式顯示在屏幕的一側，所有 map 圖標都顯示在屏幕另一側的 PNG map 上。）

場地部分

<%= 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>

場地部分具有改變背景顏色的 hover 樣式。 當我的hover 超過場地map 圖標時，主要部分的背景顏色按預期變化。

但是，當懸停在主要部分上時，如何讓 map 圖標改變其樣式？

每個 map 圖標都有一個 .mapclass:hover 樣式，但僅在將鼠標懸停在圖標上時才會激活，而不是其所在的部分。

感謝您的任何幫助，非常感謝！

Answer 1

CSS：

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