简单的CSS悬停问题？

我不明白为什么我的锚点悬停不会导致下面的div框变黄。这里是我的代码：简单的CSS悬停问题？

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

我很累，现在，所以我必须忽视的东西简单

来源

2010-07-27 John

引入hide之前，您正在缩小<a>，所以路径

a:hover #hide

会从不申请。

来源

2010-07-27 18:14:59

谢谢，我想我应该小睡一下......太累了 – John 2010-07-27 18:31:55

：悬停#hide - 意味着你需要的样式应用到包含锚标记

在您展示HTML里面一个孩子，DIV #hide不是锚标签的子

HTH

来源

2010-07-27 18:15:16 Sunny

我不认为这会奏效。我想你将不得不通过JavaScript来颜色故：

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

来源

2010-07-27 18:16:37 sTodorov

'onclick！= hover' – 2010-07-27 18:22:56

对不起，错误 – sTodorov 2010-07-27 18:31:03

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

来源

2010-07-27 18:17:24 Sarfraz

你的意思是它不是*有效*标记。 :) – 2010-07-27 18:25:11

@Pekka：这是真的，谢谢你的正确术语:) – Sarfraz 2010-07-27 18:27:59

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

这不存在，你想要这个：

a:hover div#hide

和你想要把你的DIV的锚内，如果这是你想要的结果：

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

来源

2010-07-27 18:19:31 Organiccat

'a：hover＃hide'和'a：hover div＃hide'基本上是相同的选择器。 – 2010-07-27 18:26:59

在现代浏览器中，这应该工作太（相邻兄弟选择“+”）：

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

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

来源

2010-07-27 18:25:02 ScottS

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

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

这应该风格ID hide链接正在上空盘旋后可直接接触元素。

来源

2010-07-27 18:26:33 derekerdmann

a:hover #hide目标ID为“隐藏”的元素内部的任何一个元素，比如这个：

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

什么你真的后你的情况是a:hover + #hide，因为这将意味着“与元素id“隐藏”在正在被徘徊的锚元素之后“。

来源

2010-07-27 18:29:07

简单的CSS悬停问题？

回答

相关问题