简单的CSS悬停问题？_Css - Fatal编程技术网

简单的CSS悬停问题？

css

简单的CSS悬停问题？,css,Css,我不明白为什么我的锚悬停没有导致下面的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/

我不明白为什么我的锚悬停没有导致下面的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>


a{背景色：蓝色；宽度：400px；高度：200px；}
#隐藏{宽度：500px；高度：500px；背景色：黑色；}
a:悬停#隐藏{背景色：黄色；}
悬停
变黄

我现在很累，所以我一定忽略了一些简单的事情

在引入

隐藏之前，您正在关闭
，因此路径
a:hover #hide 

将永远不会应用。
在引入隐藏之前，您正在关闭
，因此路径
a:hover #hide 

永远不会应用。
a:hover#hide-意味着您需要将样式应用于锚定标记中包含的子项
在显示的HTML中，DIV#hide不是锚标记的子项
HTH
a:hover#hide-意味着您需要将样式应用于锚定标记中包含的子项
在显示的HTML中，DIV#hide不是锚标记的子项
HTH我认为这行不通。
我认为您必须通过javascript对其进行着色：
<a onmouseover="document.getElementById("hide").stylebackgroundcolor='yellow'">hover</a>

悬停
我认为这行不通。
我认为您必须通过javascript对其进行着色：
<a onmouseover="document.getElementById("hide").stylebackgroundcolor='yellow'">hover</a>

悬停
为了让CSS正常工作，您的HTML应该如下所示：
<a>hover
  <div id="hide">turn yellow</div>
</a>

但是如果你在CSS中做了：
div:hover{.....}

这在IE6中不起作用，因为IE6只支持链接的：hover
伪选择器
因此，如果要使用链接（标记结构），简单的解决方案是：
要使CSS正常工作，HTML应如下所示：
<a>hover
  <div id="hide">turn yellow</div>
</a>

但是如果你在CSS中做了：
div:hover{.....}

这在IE6中不起作用，因为IE6只支持链接的：hover
伪选择器
因此，如果要使用链接（标记结构），简单的解决方案是：
此项不存在，您需要此项：
a:hover div#hide

如果这是你想要的结果，你想把你的div放在你的锚中：
<a>hover
  <div id="hide">turn yellow</div>
</a>

悬停
变黄

此项不存在，您需要此项：
a:hover div#hide

如果这是你想要的结果，你想把你的div放在你的锚中：
<a>hover
  <div id="hide">turn yellow</div>
</a>

悬停
变黄
在现代浏览器中，这也应该起作用（相邻的同级选择器“+”）：
但这将是相当奇怪的。提到将div
放在a
中的解决方案是html的常见形式。但是，要使其成为有效的html，div
需要更改为span
，然后如果需要div的块质量，请将其设置为display:block
，在现代浏览器中，这也应该起作用（相邻的同级选择器“+”）：
但这将是相当奇怪的。提到将div
放在a
中的解决方案是html的常见形式。但是，要使其成为有效的html，需要将div
更改为span
，然后如果需要div的块质量，请将其设置为display:block
，如其他海报所示，您可以将\hide
div放置在链接内；但是，如果您确实希望div位于链接之外，则可以使用：
a:hover + #hide { background-color:yellow; }

这应该使用idhide
设置元素样式，该元素直接出现在链接悬停后。
如其他海报所述，您可以将#hide
div放置在链接内；但是，如果您确实希望div位于链接之外，则可以使用：
a:hover + #hide { background-color:yellow; }

这应该使用idhide
设置元素的样式，该id直接出现在悬停链接之后。
a:hover#hide
将id为“hide”的元素定位在任何a元素内，例如：
<a href="...">
<span id="hide">...</span>
</a>



在你的例子中，你真正想要的是a:hover+#hide
，因为这意味着“id为“hide”的元素就在被悬停的锚元素之后。”
a:hover#hide
将id为“hide”的元素定位在任何a元素中，例如：
<a href="...">
<span id="hide">...</span>
</a>



在你的例子中，你真正想要的是a:hover+#hide
，因为这意味着“id为“hide”的元素就在被悬停的锚元素之后”.
a:hover#hide
和a:hover div#hide
基本上是相同的选择器。a:hover#hide
和a:hover div#hide
基本上是相同的选择器。