Skip to main content

Forums

This topic contains 10 replies, has 0 voices, and was last updated by  sarukuku 6 years, 4 months ago.

Viewing 11 posts - 1 through 11 (of 11 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
    Moderator
    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.
    #60857

    chrisburton
    Participant

    This reply has been reported for inappropriate content.

    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;}
    #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.

    #60859

    chrisburton
    Participant

    This reply has been reported for inappropriate content.

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

    Edit: Couldn’t

    #60861

    sarukuku
    Member

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

    #60863

    chrisburton
    Participant

    This reply has been reported for inappropriate content.

    There is but I can’t figure it out

    #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 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star