Forums

mattvot

Is is possible to create define a CSS characteristic such as



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

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

and if not, any alternatives?

apostrophe

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.

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!

Robskiwarrior

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

#links ul li a:hover #test

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

<div id=\"links\">
<ul>
    <li><a href=\"#\">Blog</a></li>
    <li><a href=\"#\">Portfolio</a></li>
    <li><a href=\"#\">Twitter</a></li>
    <li><a href=\"#\">LinkedIn</a></li>
    <li><a href=\"#\">oDesk</a></li>
</ul>
</div>

<div id=\"test\"></div>

apostrophe

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

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

apostrophe

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?

chriscoyier

If you need to use pure CSS:

<div id=\"links\">
<ul>
    <li><a href=\"#\">Blog</a></li>
    <li><a href=\"#\">Portfolio</a></li>
    <li><a href=\"#\">Twitter <span id=\"test\"></span></a></li>
    <li><a href=\"#\">LinkedIn</a></li>
    <li><a href=\"#\">oDesk</a></li>
</ul>
</div>

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:

$(\"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

treehouse : what would you like to learn today?

Forums

Display problems with "a:hover #test"