for example if i have a link it could be a text link or an image link, in a div called row1, when i move the mouse over this link i would like to show an image which by default is set to hidden in another div called row2
following is my code however on hover i am not able to show the image in row2 div, i tried both display: none; and visibility:hidden; for the image in row2 and on hover i tried using display: block; and visibility:visible; as 2 combinations however i am not able to show the image in the row2 div
<div id="row1">
<a href="#">Link</a>
OR
<a href="#"><img src="imagerow1.jpg"></a>
</div>
<div id="row2">
<img src="imagerow2.jpg">
</div>
#row2{
float: left;
width: 900px;
height: auto;
}
#row2 img{
visibility:hidden;
// i also tried display: none;
}
#row1{
float: left;
width: 900px;
height: auto;
}
#row1 a:hover, #row2 img {
visibility: visible;
// i also tried display: block;
}
i guess after i am able to show the image in row2 div with the correct code, i can apply this concept to hide and display a div which has text, images, flash etc...
please advice.
thanks |
