ansaurus

Question

Answer 1

+2 A:

You are closing the <a> before introducing hide, so the path

a:hover #hide

will never apply.

Pekka 2010-07-27 18:14:59

thanks, i think i should take a nap...too tired

John 2010-07-27 18:31:55

Answer 2

A:

a:hover #hide - means you need to apply the style to a child contained inside the anchor tag

In the HTML you show, the DIV #hide is not a child of the anchor tag

HTH

Sunny 2010-07-27 18:15:16

Answer 3

A:

I do not think this will work. I think you will have to color it via javascript:

<a onmouseover="document.getElementById("hide").stylebackgroundcolor='yellow'">hover</a>

sTodorov 2010-07-27 18:16:37

`onclick != hover`

Matt Ball 2010-07-27 18:22:56

sorry for the mistake

sTodorov 2010-07-27 18:31:03

Answer 4

+2 A:

Your HTML should look like this for your CSS to work:

<a>hover
  <div id="hide">turn yellow</div>
</a>

But again I am afraid It isn't valid markup. To work around that, you could have wrapped that into another div:

<div>hover
  <div id="hide">turn yellow</div>
</div>

But yet if you did in CSS:

div:hover{.....}

That won't work in IE6 because IE6 supports :hover pseudo selector only for links.

So the simple solution if you want to use a link (your markup structure):

<a id="link">hover</a>
<div id="hide">turn yellow</div>

You need to use javascript like this:

var el = document.getElementById('link');
var dv = document.getElementById('hide');

el.onmouseover = function(){      
  dv.style.backgroundColor = 'yellow';
};

el.onmouseout = function(){
  dv.style.backgroundColor = 'blue';
};

Sarfraz 2010-07-27 18:17:24

You mean it's not *valid* markup. :)

Pekka 2010-07-27 18:25:11

@Pekka: That's true, thanks for correct terminology :)

Sarfraz 2010-07-27 18:27:59

Answer 5

A:

a:hover #hide {background-color:yellow; }

This does not exist, you want this:

a:hover div#hide

AND you want to put your div inside your anchor if this is your desired outcome:

<a>hover
  <div id="hide">turn yellow</div>
</a>

Organiccat 2010-07-27 18:19:31

`a:hover #hide` and `a:hover div#hide` is basically the same selector.

Arve Systad 2010-07-27 18:26:59

Answer 6

A:

In modern browsers, this should work too (the adjacent sibling selector '+'):

a:hover + #hide {background-color:yellow;}

But that would be rather odd. The solutions that mention putting the div inside the a is the common form of the html. To make it valid html, however, the div needs to change to a span and then if you need the block qualities of a div set it to display: block.

Scott 2010-07-27 18:25:02

Answer 7

A:

As noted by the other posters, you could place the #hide div inside the link; however, if you really wanted the div outside the link, you could use:

a:hover + #hide { background-color:yellow; }

This should style the element with id hide that comes directly after the link being hovered over.

derekerdmann 2010-07-27 18:26:33

Answer 8

A:

a:hover #hide targets an element with ID "hide" inside any a-element, for example this:

<a href="...">
<span id="hide">...</span>
</a>

What you're really after in your case is a:hover + #hide, as this would mean "the element with id "hide" right after an anchor element which is being hovered".

Arve Systad 2010-07-27 18:29:07

ansaurus

tags:

views:

answers:

Simple CSS Hover Problem?

related questions