簡單的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懸停問題？

回答

相關問題