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 11 of 11

Thread: using hover

  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    137
    Thanks
    1
    Thanked 0 Times in 0 Posts

    using hover

    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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    To control the properties of an element with respect to another one, the former should be a child element of later one. Thus
    Code:
    <div id="div2">
    <a href="#">
    <img src="....">
    </a>
    </div>
    Code:
    #div2 img{
    visibility: hidden;
    }
    #div2 a:hover img{
    visibility: visible;
    }
    should work.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    <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!)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    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 ?

    ...

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

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

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Add
    Code:
    a:hover{
    height:1%;
    }
    too into your CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,274
    Thanks
    28
    Thanked 271 Times in 265 Posts
    Quote Originally Posted by sudhakararaog View Post
    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
    The 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.)

    Quote Originally Posted by abduraooft View Post
    Add
    Code:
    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.
    Last edited by Arbitrator; 12-29-2009 at 08:48 AM. Reason: Added "After that change..." text.
    For every complex problem, there is an answer that is clear, simple, and wrong.

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

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Quote Originally Posted by sudhakararaog View Post
    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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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