How can I add a style to a child div when hovering the parent?

I have a table of venue records and each venue has a map icon absolutely positioned on the page (using top and left integer fields from each record).

Each venue is displayed on the index page as a partial with each venues icon plopped on to a map displayed away from the main partial. (All partials are shown in a grid style on one side of the screen and all map icons are shown on a PNG map on the other side of the screen.)

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>

The venue partial has a hover style which changes the background colour. When I hover over the venues map icon, the background colour of the main partial changes as expected.

However, how can I go about making the map icon change its style when hovering over the main partial?

Each map icon has a .mapclass:hover style but is only activated when hovering over the icon not the partial开发者_运维知识库 its sitting in.

Thanks for any help its much appreciated!

CSS:

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