How to use jquery for this scenario?

Question

I have following scenario - I am displaying a list of product names as link.Now,when the user hovers over the link I need to display the image of the product(the image is hidden).The html is like this (build dynamically so prod1,prod2 etc)

 <a id="prod1" title="product"></a>
 <div class=hidden><img src=""></img></div> 

Answer 1

You can do it using .hover() and .toggleClass() like this:

$("#prod1").hover(function() {
  $(this).next("div").toggleClass("hidden");
});

If you gave your links a class though, you can make it more generic, like this:

<a id="prod1" title="product" class="prod"></a>

And script like this:

$(".prod").hover(function() {
  $(this).next("div").toggleClass("hidden");
});

You can also give it an effect if you want, for example an expand/fade like this:

$(".prod").hover(function() {
  $(this).next("div").stop(true, true).toggle('fast');
});

Answer 2

you can use .show() and .hide().

if you can, give links a common class so that you can do it like this...

$('.prod').hover(
  function{
    $(this).next('.hidden').show();
  },
  function{
    $(this).next('.hidden').hide();
  }
);

but if you can't change the html , you can do it like this,

function over(){
    $(this).next('.hidden').show();
}
function out(){
    $(this).next('.hidden').hide();
}
$('#prod1,#prod2').hover(over,out); // this will show on mouseover and hide on mouseout

// but if you just want to show and not hide do this
$('#prod1,#prod2').hover(over);

Answer 3

You don't need jquery to do this unless you want fancy animations.

 <div class="aProductLink" >
    <a id="prod1" title="product"></a>
    <div class="productHoverContent"><p>Put a description here if you need.</p><img src="bla.jpg"/></div>
 </div>

Css is something like this:

.aProductLink {
  position:relative;
  overflow:visible;
}

.productHoverContent{
  display:none;  //Hide by default
  position:absolute;
  top:0;
}

.aProductLink:hover .productHoverContent {
  display:block; //Show in hover state.
}

It's the same technique as suckerfish dropdown menus.

Note that most touch screen phones have no hover state so you should consider the accessibility of this.