Question

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

每个场地都在索引页面上显示为部分，每个场地图标都放在远离主要部分的地图上。（所有部分在屏幕的一侧以网格样式显示，所有地图图标都显示在屏幕另一侧的PNG地图上。）

Venue partial

<%= 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 */
}

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

1 个答案: