Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts

    on hover effect using css

    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

  • #2
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    try giving visibility:hidden; to your #row2 class instead of giving it in #row2 img
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #3
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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{}

  • #4
    Regular Coder
    Join Date
    Dec 2007
    Posts
    107
    Thanks
    0
    Thanked 3 Times in 3 Posts
    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.
    Programming & Webmaster Forum - AdSense Revenue Sharing forum

  • #5
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    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.

    Code:
    .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.
    Last edited by linehand; 12-03-2009 at 09:55 AM. Reason: Typo

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •