using hover

i have 2 divs div1 and div2

there is an image in div2 and there is a link in div1, by default the image in div2 is hidden and i have used
#div2 img{
visibility: hidden; // also i tried display: none;
}

when i move the mouse over the link in div1 i want the image in div2 to appear

following is my code
#div1 a:hover #div2 img1{
visibility: hidden; or display: none;
}

the image in div2 is not appearing

without using javascript or jquery can this simple effect be done by using css code

can someone tell me the correct syntax to show the image

please advice.

thanks

 

I believe you would have to use java script for what you are trying to accomplish with css.
However, if the link and image are close enough together on the page, you could use the hover property to change the background image. This would take a little bit of creative css trickery.

 

it is very easy , surely it can be done with css , why use to div's one is enough

like you code may be looks like this

<div class="blahblah"><a href="http://example.com">Exapmple</a></div>

CSS
.blahblah a:hover{
background: url(link/to/the/image.png)
}

or you are looking for some what tooltip type of function

 

it can be don with only one Div, insert image in div one and then a link and do as "Wp-Mod.Com" is saying

 

Silly question, but do you even NEED the second div?

 

i have tried using this method

.blahblah a:hover{
background: url(link/to/the/image.png)
}

however when i hover i do not see the entire width and height of the image
i have specified width and height as well which is the images width and height

.blahblah a:hover{
background: url(link/to/the/image.png)
width: 500px;
height: 300px;
}

 

Anchor is an inline-level tag so it defaults to display:inline; - you cannot set width and height on display:inline elements. Set it to display:block or display:inline-block;

 

you have to specify the width for element with out hover means the links