-5

idI have these links on a page:

<div>
     <a href="#" id="eq1">Item 1</a>
     <a href="#" id="eq2">Item 2</a>
     <a href="#" id="eq3">Item 3</a>
</div>

I want to add a hover feature using css so that when a link is hovered over a image specific to that link appears as background image in the container div. I'm fairly new to jquery and js but I'd prefer a pure css solution if possible.

Ant
  • 1
  • 6
    :hover is the answer – Praveen Sep 09 '13 at 15:35
  • You must google first before you ask something here. – Mirage Sep 09 '13 at 15:37
  • please display some basic knowledge, dont use this site as a reference. – Math chiller Sep 09 '13 at 15:38
  • With the help of @j08691,I found this. Please check it http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector – Praveen Sep 09 '13 at 15:58
  • Hi, just to say that I've been struggling with this issue for some time and adding comments like 'You must google first before you ask something here' isnt really that helpful. Do you really think that I didn't try that? – Ant Sep 10 '13 at 08:25

2 Answers2

1

You have the answer to this question in your post: hover The CSS would be this:

#eq1:hover {
background-image: url ('../link_to_file.png');
}

jQuery:

You can do that in jQuery. But to do that in jQuery would be this, and also, do you have an image? I will tell you how to link the image. Use your image for that.

Example: 

$(document).ready(function () {
  $("#eq1").mouseover(function () { // function to run, when mouse comes over eq1
    $("div").css("background", "image_image_link.png");
  }
});

Instead of using div you can use (this).parent too because you said, you wanted the image to show up for the parent div. You can repeart the code for all of the three links.

Note: You cannot add CSS properties to some other divs in CSS, for that you must use jQuery.

Edit:

You wanted to add the images in some other div. That would be something like:

<div class="all-images">Add all the images here..</div>
<div class="image-viewer"></div>

Now what this actually is something like this: The .all-images is the container, that will contain all the images like thumbnails. And the .image-viewer will be used to show the image. 

$(document).ready(function () {
  $(".all-images").click(function () { //
    $(".image-viewer").css("background", "image_image_link.png");
   }
});

In the example I used, the click on the the image (.all-images) will show the image in the div. But remember to use something like a name of the image. Because jQuery won't remember which image was clicked. You can use something like src of that img.

Afzaal Ahmad Zeeshan
  • 14,868
  • 10
  • 50
  • 94
0

try this 

div:hover #id1{
   background: white url('path/to/image.png') no-repeat top left;
}
chris
  • 4,555
  • 5
  • 30
  • 53