Display problems with "a:hover #test"

[mattvot]

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?

[mattvot]

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 MacKay]

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

[mattvot]

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?

Code:

• Blog
• Portfolio
• Twitter
• LinkedIn
• oDesk

[mattvot]

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

[Chris Coyier]

If you need to use pure CSS:

Code:

• Blog
• Portfolio
• Twitter
• LinkedIn
• oDesk

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.

[mattvot]

Cheers Chris, this works

[Author]

Posts