悬停父级时如何向子级 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 */
}