Question

我不明白为什么我的锚悬停不会导致下面的div框变黄。这是我的代码：

<?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>

我现在很累，所以我必须忽视一些简单的事情

Answer 1

在介绍<a>之前，您正在关闭hide，因此路径

a:hover #hide

永远不会适用。

Answer 2

您的HTML应如下所示，以便您的CSS正常工作：

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

但是我恐怕它不是有效的标记。要解决这个问题，您可以将其包装到另一个div：

中

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

但是如果你用CSS做的话：

div:hover{.....}

这在IE6中不起作用，因为IE6仅支持链接的:hover伪选择器。

如果您想使用链接（您的标记结构），那么这是一个简单的解决方案：

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

你需要使用这样的javascript：

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

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

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

Answer 3

a：hover #hide - 表示您需要将样式应用于锚标记内包含的子项

在您显示的HTML中，DIV #hide不是锚标记的子项

HTH

Answer 4

我不认为这会奏效。我想你必须通过javascript：

给它上色

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

Answer 5

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

这不存在，你想要这个：

a:hover div#hide

如果这是你想要的结果，你想把你的div放在你的锚中：

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

Answer 6

在现代浏览器中，这也应该起作用（相邻的兄弟选择器'+'）：

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

但那会很奇怪。提及将div置于a内的解决方案是html的常见形式。但是，要使其成为有效的html，div需要更改为span，然后如果您需要div的块质量，请将其设置为display: block。

Answer 7

正如其他海报所述，您可以将#hide div放在链接中;但是，如果你真的想要链接之外的div，你可以使用：

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

这应该设置标识为hide的元素，该元素在链接悬停之后直接出现。

Answer 8

a:hover #hide定位任何a元素中ID为“hide”的元素，例如：

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

你真正追求的是a:hover + #hide，因为这意味着“带有id的元素”隐藏在“正在悬停的锚元素之后”。

简单的CSS悬停问题？

8 个答案: