Forums

  • # 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.
    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: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 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 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag