Grow your CSS skills. Land your dream job.

Make “div” visible while mouse hovering on a “a href”?

  • # February 12, 2011 at 11:02 am

    Just don’t know how to achieve this with css if it’s even possible?

    I have “a href” and when I hover on it, I want another “div” sitting next to it change its visibility from hidden to visible. So guys, help the new kid in town and tell me how to achieve this. All help is greatly appreciated!

    # February 12, 2011 at 11:28 am
    a:hover + div{visibility: visible;}
    gno
    # February 12, 2011 at 1:01 pm

    Jamy_za – wouldn’t that target all divs that follow an a-tag in hover state?

    I’ll bet my hat that it’ll never work.

    If I were to build something like that I’d use jQuery.

    A little CSS for initiate state of the div.

    div.someclass {visibility: hidden;}

    The jQuery to make it show on hover.

    $(document).ready(function(){
    $('a.someclass').mouseover(function(){
    div = $('div.someclass');
    div.stop().animate({visibility: visible}, 150);
    }).mouseout(function(){
    div.stop().animate({visibility: hidden}, 150);
    });
    });

    The Markup.

    Hover here...
    To show this.
    # February 12, 2011 at 1:13 pm

    I think Jamy was just showing how to achieve it not really being too semantic to show the person where to throw in HIS specific class or ID. Therefore wouldn’t it work the same way Jamy said by actually referring to the specific class?

    a:hover + .whatever {visibility: visible;}
    gno
    # February 12, 2011 at 1:23 pm

    @ChristopherBurton, You are probably right about that. I guess I was a bit too fast…

    First, I’m pretty darn sure, that you cannot target elements using the +-combinator on elements with a specified state. I have just tested it, and I’m not able to make it work.

    Secondly, Jamy’s solution, if it was working (and I agree – it seems as if it should, on paper at least), would require the div to be placed after the corresponding a-tag.

    # February 12, 2011 at 2:04 pm

    I’ll see if I can get it working as it seems correct.

    Edit: Couldn’t

    # February 12, 2011 at 2:29 pm

    So, are you guys telling me that there actually isn’t a practical way to achieve this through CSS?

    # February 12, 2011 at 2:47 pm

    There is but I can’t figure it out

    # February 12, 2011 at 3:39 pm

    Ok guys, this is how I managed to get it working:

    HTML:





    CSS:


    div#backButton a span {
    display: none;
    }

    div#backButton a:hover span {
    width: 150px;
    height: 50px;
    position: absolute;
    top: 5px;
    left: 70px;
    display: block;
    overflow: hidden;
    background-image: url(../images/palaa.png);
    background-size: 150px 50px;
    background-position: center center;
    }

    This works nicely at least on firefox 4 beta + webKit.
    EDIT: Plus newest Opera and IE 9 first RC

    # April 27, 2013 at 2:02 pm

    Hey guys, this worked for me by playing with [The Adjacent-Sibling Selector](http://meyerweb.com/eric/articles/webrev/200007a.html “The Adjacet-Sibling Selector”)

    HTML:



    <li class="membernames"><a href="#">David M.</a></li>

    <li class="signout"><a href="#">Sign Out</a></li>

    CSS:


    .signout{
    display:none;
    }
    .membernames:hover + .signout{
    display : block;
    }
    # May 20, 2013 at 4:03 am

    **Thanks To sarukuku**

    #copyright p#backButton a span {
    display: none;
    }

    #copyright p#backButton a:hover span {
    width: 23px;
    height: 23px;
    position: absolute;
    z-index:1px;
    top: 9px;
    left: 963px;
    display: block;
    overflow: hidden;
    background-image: url(../images/idreamstech.jpg);
    background-size: 23px 23px;
    background-position: center center;
    }
    > i use it to visible my copyrights symbol of my company ….. without jquery it’s cool

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".