Display a div when hovering on another div using CSS - css

Question

I need to show an image once I hover over the navigation tabs. From the ruby code below you can see I am giving an id to each navigation (I could give a class too if needed):
<div class="top-container">
<nav class="navbar">
<ul>
<% Placement.all.each do |placement| %>
<li class=<%= "highlightedTopNav" if placement.id==params[:id].to_i %>> <%= link_to placement.placementname, placement_path(placement.id), :id => placement.placementname %> </li>
<%end%>
</ul>
</nav>
</div>
<div class="container">
<div style="background-image:url('images/pointingup.png');">
<img src="images/...">
</div>
</div>
Now I need to show a different image withing the 'container'div above for each of the navigation
I tried many solutions online but none work for me.

Answer 1

Alot could depend on the overall design of what you're trying to achieve here, but in css there needs to be some parent/sibling relationship with the element you are hovering and the element you want to effect.
For instance:
<li>
<div>Hello</div>
</li>
In your stylesheet you could: li:hover div { background: red; }
Since the div is a child of the LI element that would work, in your example the div you are effecting has no relationship in the dom with the element you are hovering. Meaning you most likely have to do this in javascript.
Alternatively you could place an empty element within the li element, <i> is generally popular for this sort of 'icon' technique and set your styles and background image on that, similar to whats going on in the product finder drop down here: http://www.havells-sylvania.com/

Answer 2

Like Barking Tiger mentioned, the displaying <div> would need to be a child of the one you are hovering to be able to use only css.
If you want to use Javascript or jQuery though, you could try something like this:
$("#navid").hover(
function () {
$(this).show(IMAGE);
},
function () {
$(this).hide(IMAGE);
}
);
EDIT: If you don't mind having a child image, you would probably do something like this:
If your HTML ended up like this:
You would do something along these lines to change the image on hover.
#navid
{
}
#navid:hover .hidden
{
display:block;
}
.hidden
{
display:none;
position:absolute;
z-index:999;
top:10;
left:10px;
}
Note the absolute positioning and z-index, that will keep your image in front of the nav. Without a code sample of your CSS it's hard to tell exactly how you want it styled, so just adjust it from there.