Simple CSS Hover Problem?
I don't understand why my anchor hover isn't causing the div box below to turn yellow. Here's my code:
<?xml ve开发者_Go百科rsion="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
You are closing the <a> before introducing hide, so the path
a:hover #hide
will never apply.
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';
};
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
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>
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.
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.
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".
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>
加载中,请稍侯......
精彩评论