如何在悬停父级时为子div添加样式？

Question

我有一个场地记录表,每个场地都有一个绝对位于页面上的地图图标(使用每个记录的顶部和左侧整数字段).

每个场地作为部分显示在索引页面上,每个场地图标都放在远离主要部分的地图上.(所有部分在屏幕的一侧以网格样式显示,所有地图图标都显示在屏幕另一侧的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>

场地部分具有悬停风格,改变背景颜色.当我将鼠标悬停在场地地图图标上时,主要部分的背景颜色会按预期更改.

但是,当我将鼠标悬停在主要部分上时,如何才能使地图图标改变其样式？

每个地图图标都有一个.mapclass:悬停样式,但仅在将鼠标悬停在图标而不是其所在的部分时激活.

感谢任何帮助,非常感谢!

Answer 1

CSS:

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