on hover effect using css
Posted: 08 December 2009 12:13 AM   [ Ignore ]
Newbie
Rank
Total Posts:  10
Joined  2009-11-22

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”>
Link
OR
imagerow1.jpg
</div>


<div id=“row2”>
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

Profile
 
 
Posted: 08 December 2009 05:52 AM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  17
Joined  2009-12-08

So basically you want an image to show in another div if you hover over a specific area in the first div? If I’m correct, let me know and I can help you. You don’t really make it clear for me to understand.

Profile
 
 
Posted: 08 December 2009 01:54 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  10
Joined  2009-11-22

precisely.

Profile
 
 
Posted: 30 April 2010 03:46 PM   [ Ignore ]   [ # 3 ]
Sr. Member
RankRankRankRank
Total Posts:  139
Joined  2010-04-23

I’m not following this either. If you’re looking at showing an image in div2 while hovering in div1 then you’re gonna have to use javascript, you can’t do this in pure CSS.
____________________
sudoku - social - puppies

Profile