Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #31597
    sarukuku
    Member

    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!

    #60854
    jamygolden
    Member
    a:hover + div{visibility: visible;}
    #60855
    gno
    Member

    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.
    #60858
    gno
    Member

    @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.

    #60861
    sarukuku
    Member

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

    #60864
    sarukuku
    Member

    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

    #133368
    Huckleberry
    Participant

    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;
    }
    #135680
    sgotmare
    Member

    **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)
  • The forum ‘CSS’ is closed to new topics and replies.