The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Display problems with "a:hover #test"

  • # March 15, 2009 at 5:19 pm

    Is is possible to create define a CSS characteristic such as

    { 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

    This reply has been reported for inappropriate content.

    Why don’t you try it and see what happens?
    Or you could check this thread
    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!

    # 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

    #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

    This reply has been reported for inappropriate content.

    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


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

    So far,

    # March 16, 2009 at 4:53 pm

    This reply has been reported for inappropriate content.

    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:

    }), function() {

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed