Question

I am currently working on a website and got stuck with the following problem:

On the website I have small dots (images) with the ids “dot0001”, “dot0002”, “dot0003”, etc. . I also have hidden images (visibility:hidden) with the ids “info0001”, “info00002”, “info0003”, etc.

I am looking for a jQuery solution. What I need is a code that allows the following events:

When users move the mouse over “dot0001” the image “info0001” becomes visible and when they leave “dot0001”, “info0001” becomes invisible again. Same applies to “dot0002”-“info0002” , “dot0003”-“info0003” etc. So only the info-images with the corresponding 4 digit number become visible.

I gave it endless tries but got nowhere and there is not even a point in pasting my code.

Any help appreciated!

Answer 1

Get all elements which id starts with “dot” and show/hide related “info” on mouseover/out:

$("[id^=dot]").hover(
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"visible"});
  },
  function(){
    $("#info" + this.id.substring(3)).css({"visibility":"hidden"});
  }
);

http://jsfiddle.net/EGBnR/