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

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.