Simple CSS Hover Problem?

Question

I don't understand why my anchor hover isn't causing the div box below to turn yellow. Here's my code:

<?xml version="1.0" encoding="iso-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
a {background-color:Blue; width:400px; height:200px;}
#hide { width:500px; height:500px;background-color:black; }
a:hover #hide {background-color:yellow; }
</style>
</head>
<body>
<a>hover</a>
<div id="hide">turn yellow</div>
</body>
</html>

I'm very tired right now, so I must be overlooking something simple

Pekka · Accepted Answer · 2010-07-27 18:14:59Z

2

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

a:hover #hide

will never apply.

answered Jul 27, 2010 at 18:14

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sarfraz · Accepted Answer · 2010-07-27 18:32:21Z

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';
};

Sunny · Accepted Answer · 2010-07-27 18:15:16Z

0

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

answered Jul 27, 2010 at 18:15

Sunny

6,3462 gold badges27 silver badges27 bronze badges

Comments

Organiccat · Accepted Answer · 2010-07-27 18:19:31Z

0

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>

answered Jul 27, 2010 at 18:19

Organiccat

5,65918 gold badges62 silver badges107 bronze badges

1 Comment

Arve Systad Over a year ago

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

ScottS · Accepted Answer · 2010-07-27 18:25:02Z

0

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.

answered Jul 27, 2010 at 18:25

ScottS

72.4k13 gold badges131 silver badges155 bronze badges

Comments

derekerdmann · Accepted Answer · 2010-07-27 18:26:33Z

0

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.

answered Jul 27, 2010 at 18:26

derekerdmann

18.4k12 gold badges83 silver badges113 bronze badges

Comments

Arve Systad · Accepted Answer · 2010-07-27 18:29:07Z

0

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".

answered Jul 27, 2010 at 18:29

Arve Systad

5,5291 gold badge35 silver badges59 bronze badges

Comments

sTodorov · Accepted Answer · 2010-07-27 18:31:19Z

0

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>

edited Jul 27, 2010 at 18:31

answered Jul 27, 2010 at 18:16

sTodorov

5,4615 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

Simple CSS Hover Problem?

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related