Grow your CSS skills. Land your dream job.

Display problems with "a:hover #test"

  • # March 15, 2009 at 5:19 pm

    Is is possible to create define a CSS characteristic such as

    Code:
    #test
    { background: red; height: 200px; width: 200px; display: none; }

    #links ul li a:hover #test
    { display: block; }

    and if not, any alternatives?

    # March 15, 2009 at 5:29 pm

    Why don’t you try it and see what happens?
    Or you could check this thread http://css-tricks.com/forums/viewtopic.php?f=2&t=1926.
    Or you could do it with jQuery.

    # March 16, 2009 at 4:14 am

    I did try it but it didn’t seem to work with me, I want to avoid jquery as is required javascript enabled. Thanks for think, I will try this!

    Rob
    # March 16, 2009 at 6:35 am

    what are you trying to achieve? We might be able to see it from another angle…

    # March 16, 2009 at 3:43 pm

    I’ve just reilised why it wont work now

    the line

    Code:
    #links ul li a:hover #test

    refers to ‘#test’ within the ‘a’, where it is not, heres the markup. any suggestions?

    # March 16, 2009 at 3:48 pm

    Can you post a link to what you are trying to do. If I can see it I might be able to help.

    # March 16, 2009 at 4:30 pm

    Hi,

    So the aim; when a user hovers over say the twitter button the div with the twitter feed displays.

    So far, http://www.wpdesigner.co.uk/test.html

    # March 16, 2009 at 4:53 pm

    I’m pretty sure that’s not possible with CSS alone. You need to use jQuery or some other Javascript library.
    Unless anyone else wants to prove me wrong?

    # March 17, 2009 at 12:17 am

    If you need to use pure CSS:

    Then use whatever kinda CSS action you need to get that #test where you need to get it (display block and absolute positioning probably). Then your selector #links ul li a:hover #test will work fine.

    Otherwise jQuery:

    Code:
    $(“a:contains(‘Twitter’)”).hover(function(){
    $(“#test”).show();
    }), function() {
    $(“#test”).hide();
    });

    Note that using :contains is probably overkill and slow, would be easier to target it by just giving it an ID to target. I just wanted to show a way to do it without changing any markup.

    # March 17, 2009 at 1:02 pm

    Cheers Chris, this works

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

You must be logged in to reply to this topic.

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