標記a的屬性是否覆蓋其父（div）？

我希望在DIV懸停（不只是當鏈接本身懸停）的鏈接的顏色變爲紅色，但是我不能讓它正常工作。這是〔實施例：

<div class="witha"><a href="">Test color without tag A</a></div> 
<div class="withouta">Test color with tag A</div>

這是CSS：

<style type="text/css"> 
.witha,.withouta { 
    height: 40px; 
    border: solid 1px red; 
    padding: 5px; 
} 

.witha:hover,.withouta:hover { 
    color: red; 
} 

a:link { 
    color:black; 
} 

a:visited { 

} 

a:hover { 
    color:red; 
} 

a:active { 

} 
</style>

當測試頁面，我發現，在該公司擁有標籤的股利，懸停不會發生，除非鏈接被徘徊，似乎標籤'a'的屬性會覆蓋div的設置。

如何使它工作嗎？（我只是想一次股利懸停在鏈接的顏色發生改變）

------------更新----- ----------------------------

嗨！重要的不起作用。我擔心有人誤解我。

下面是一個例子，請檢查並測試它。

<html> 
<head> 
<title>Insert title here</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
.witha,.withouta { 
    height: 40px; 
    border: solid 1px black; 
    padding: 5px; 
} 
.witha:hover,.withouta:hover { 
    color: red ! important; 
} 
a:link { 
    color: black; 
} 
a:visited { 

} 
a:hover { 
    color: red 
} 
a:active { 

} 
</style> 
</head> 
<body> 
<div class="witha"><a href="">Test color without tag A</a><br/>This is not a link, it works fine(change to red when the div.witha is hovered).But the link above should change to red also.</div> 
<div class="withouta">Test color with tag A</div> 
</body> 
</html>

來源

2010-10-25 hguser

我已經嘗試了「讓懸停顏色是很重要的屬性爲」根據答覆，但它不工作:(。 – hguser 2010-10-25 05:35:35

，關鍵是要選擇內徘徊.witha 的a這樣 JSFiddle

.witha:hover a { 
    color: red; 
}

或全部：

<html> 
<head> 
<title>Insert title here</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<style type="text/css"> 
.witha,.withouta { 
    height: 40px; 
    border: solid 1px black; 
    padding: 5px; 
} 
.witha:hover,.withouta:hover { 
    color: red ! important; 
} 
a:link { 
    color: black; 
} 
a:visited { 

} 

.witha:hover a { 
    color: red; 
} 
a:active { 

} 
</style> 
</head> 
<body> 
<div class="witha"><a href="">Test color without tag A</a><br/>This is not a link, it works fine(change to red when the div.witha is hovered).But the link above should change to red also.</div> 
<div class="withouta">Test color with tag A</div> 
</body> 
</html>

來源

2010-10-25 07:33:17

製作懸停顏色是很重要的屬性

.witha:hover,.withouta:hover { 
    color: red !important; 
}

來源

2010-10-25 02:42:34

你需要看看CSS選擇器的specificity。

要麼增加:hover一個，要麼使用!important。

來源

2010-10-25 02:45:02 alex

您沒有告訴我們您正在測試哪個瀏覽器。
IE6允許'懸停'psuedo標籤僅在<a>標籤上。

來源

2010-10-25 03:48:33 Sujoy

我使用Firefox，但它是更好的，如果它支持IE :) – hguser 2010-10-25 07:46:36

我認爲你需要的是這個規則，如果我正確理解你的問題。

a:hover, .witha:hover a{ 
    color: red 
}

這（戕：懸停a）是比下面的規則，這是以前管轄鏈接的文本顏色更具體地，即使當戕：懸停規則施加

a:link { 
    color: black; 
}

作爲另一方面，CSS規則中重要的使用應限制在沒有其他選擇的情況下。如果可能，請改用更具體的選擇器。

請確保您閱讀了@ Alex的答案中鏈接的特異性信息。

來源

2010-10-25 07:30:49

總之，我想在包括噸當div被徘徊時，他標記'a'變成紅色。也就是說，如果我將鼠標懸停在div上，但鼠標不放在鏈接上，鏈接也會變成紅色。我正在閱讀@ Alex的答案中的鏈接。:) – hguser 2010-10-25 07:52:36

這就是這個規則中的第一條規則答案確實（至少在FF和Safari中）。它應該替換現有的a：hover規則。它不適合你嗎？ – 2010-10-25 07:55:14

是的，它不起作用。我已經嘗試了@ red-X的完整代碼，而且還沒有工作。 – hguser 2010-10-25 10:10:34

標記a的屬性是否覆蓋其父（div）？

回答

相關問題