...

View Full Version : on hover effect using css



sudhakararaog
12-01-2009, 09:52 AM
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

technica
12-01-2009, 10:01 AM
try giving visibility:hidden; to your #row2 class instead of giving it in #row2 img

sudhakararaog
12-01-2009, 10:09 AM
thanks for replying

i have tried

#row2{
visibility: hidden;
}

#row1 a:hover, #row2{
visibility: visible;
}

this is displaying the image by default in row2 div i also tried

#row2{
display: none;
}

#row1 a:hover, #row2{
display: block;
}

both are not working is this statement correct
#row1 a:hover, #row2{}

technica
12-01-2009, 10:12 AM
another solution can be a javascript code which can do this. you will need to call a javascript function on mouseover which will do magic for you.

linehand
12-03-2009, 09:52 AM
I just recently had to do the same thing for a site I am working on and what finally worked for me (I must have tried 30 different methods) was to put a span inside the link and then have the element (that you want to appear on hover) inside the span which is inside the link.

this seems to work fine with a div (instead of span) inside the link as well - which would have been better for my purposes, but that is not valid html and I really want my pages to be 100% valid, thus the span.

This kind of thing is easy to do with Dynamic HTML where hovering one element can hide/unhide any number of elements virtually anywhere on the page (a feature which I wish was in CSS - maybe it is.. but the browsers seem to have such inconsistent support for it that the only way I could get it to work consistently in most browsers was to put the hidden/unhidden element in the link itself which is a highly limiting requirement. I really didn't want this to depend upon Javascript though so the Dynamic HTML option was out.


.toplinks a:hover .onhoverpic {visibility:visible;}

.onhoverpic is the element that should be hidden/unhidden (hidden by default) The only way I could get this to work consistently in FF, IE7, and IE8 is if .onhoverpic is actually inside .toplinks a.

It still won't work in IE6 but I don't really care because IE6 is a very small minority of our traffic and this visual feature is purely presentational and not essential, and it is not obvious that anything is wrong if it doesn't work. It does seem to work fine in everything above IE6.

briansmccabe
12-03-2009, 04:39 PM
Hi -

If it's ok, I am going to attempt to resolve my issue by piggybacking on this thread, because it sounds very similar to what I need help with.

I am working on the page found at http://www.bobthearchitect.com/final. I am needing to implement some menus on a few of the buttons that are along the bottom of the page. What I need is for when a user hovers over the button, the menu options appear in a listed format below the button. The links need to remain there for the user to then move the mouse OFF the button and down to the link he/she wants to click. I am really hoping I can do this with just CSS, because I suck at JS.

Does anyone have a suggestion? Thanks very much. I am glad I found this great site.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum