...

View Full Version : using hover



sudhakararaog
12-24-2009, 07:40 AM
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

abduraooft
12-24-2009, 08:32 AM
To control the properties of an element with respect to another one, the former should be a child element of later one. Thus

<div id="div2">
<a href="#">
<img src="....">
</a>
</div>


#div2 img{
visibility: hidden;
}
#div2 a:hover img{
visibility: visible;
} should work.

sudhakararaog
12-24-2009, 09:08 AM
thanks for replying

i have tried as you mentioned however the image is not displaying when i hover over the link. following is the code

<div class="div2">
This div which contains an image which is hidden by default <br /> <br />
<a href="#">Move the mouse</a><br /> <br />
<img src="greeting2.jpg" /> <br /><br />
text after the image
</div>


.div2{
float: left;
width: 900px;
height: auto;
}
.div2 img{
visibility: hidden;
}

.div2 a:hover img{
visibility: visible;
}

please advice.

thanks

abduraooft
12-24-2009, 09:26 AM
<a href="#">Move the mouse</a><br /> <br />
<img src="greeting2.jpg" /> <br /><br /> This is not what I suggested! That image should be withing that anchor. (CSS stands for "cascading" style sheets!)

sparkbox
12-24-2009, 04:59 PM
This is not what I suggested! That image should be withing that anchor. (CSS stands for "cascading" style sheets!)

<a href="#" img src="greeting2.jpg">Move the mouse</a>

ya mean like that ?

...

linehand
12-25-2009, 05:09 AM
No! He means it needs to be nested inside the anchor, not an attribute of the anchor.

like this:
<a href="#">Move the mouse<img src="greeting2.jpg"></a>

or this (which is identical code, just formatted so it is easier to see where things are in relation to each other within the code):
<a href="#">
Move the mouse
<img src="greeting2.jpg">
</a>

Can you see how <a href="#"> says "hey this is an anchor" and defines the attributes of the anchor. Then </a> says "that is all and anything after this no longer that anchor". Only what is between those two is the actual anchor and when someone says to put something inside the anchor they mean <a>RIGHT HERE</a>.

sudhakararaog
12-29-2009, 07:43 AM
thanks a lot, i have used

<a href="#">Move the mouse over to see a hidden image<br /><br /><img src="greeting2.jpg" /></a>

img{
visibility: hidden;
}

a:hover img{
visibility: visible;
}

however this technique is not working only in ie6, i guess nothing much can be done about it, or for the sake of ie i guess a onmouseover javascript function needs to be written for consistancy

abduraooft
12-29-2009, 09:11 AM
Add

a:hover{
height:1%;
} too into your CSS.

Arbitrator
12-29-2009, 09:39 AM
i have tried as you mentioned however the image is not displaying when i hover over the link. following is the code

<div class="div2">
This div which contains an image which is hidden by default <br /> <br />
<a href="#">Move the mouse</a><br /> <br />
<img src="greeting2.jpg" /> <br /><br />
text after the image
</div>


.div2{
float: left;
width: 900px;
height: auto;
}
.div2 img{
visibility: hidden;
}

.div2 a:hover img{
visibility: visible;
}

please adviceThe second selector should be *.div2 a:hover + br + br + img or *.div2 a:hover + * + * + img. In a later post, you mentioned a desire for IE6 support though; unfortunately, Microsoft didn't add support for the adjacent sibling combinator (i.e., the + combinator) until IE7.

And, FYI, all of those br elements should be avoided. You could achieve the same positioning effect with more precision by using display: block (or similar) in tandem with the padding and/or margin properties on the a and img elements. (After that change, your selector would likely be *.div2 a:hover + img.)


Add

a:hover{
height:1%;
} too into your CSS.To invoke hasLayout? It's always good to explain these things that are not at all obvious.

sudhakararaog
12-29-2009, 09:42 AM
thanks a lot that worked

just a question in this case of giving height:1%; for a:hover{} worked in ie6

are there any other such situations where ie6 would not work and other browsers would work fine and by adding height:1%; ie6 will also work

thanks.

abduraooft
12-29-2009, 11:10 AM
thanks a lot that worked

just a question in this case of giving height:1%; for a:hover{} worked in ie6

are there any other such situations where ie6 would not work and other browsers would work fine and by adding height:1%; ie6 will also work

thanks. Check www.satzansatz.de/cssd/onhavinglayout.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum