鼠標懸停圖片上的文字改變鏈接的顏色

我已經CSS徘徊在照片上進行（彩色版 - >懸停 - >黑&白色版）

和文字鏈接（黑色字體 - >懸停 - >紅色字體）

當我徘徊的鏈接 - 畫面是越來越徘徊版本（B & W）這是很正常的，但這只是在工作這個方向，相反的方向，當我在圖片盤旋 - 文本鏈接保持不變（黑色字體）

這就是我的問題，如何連接這兩個元素（文本鏈接和圖片）？

這裏是我的代碼：

HTML

<ul class="menu">  
li class="element_1"><a href="./first_link.html"></a> 
<a href="./first_link.html" class="text">Text of the<br>First<br>Link</a></li> 

[rest of the elements list] 
</ul>

CSS

ul.menu element_1{ 
width:130px; 
margin-left:20px; 
    height:130px; 
display: block; background: url(img/menu_1.jpg) top center no-repeat;; 
} 


ul.menu li.element_1:hover{ 
width:130px; 
margin-left:20px; 

display: block; background: url(img/menu_1_bw.jpg) top center no-repeat;;

來源

2013-03-20 user2191804

尤其當你正在做使用背景圖片，我會建議重組你的HTML只使用一個單一的錨。然後，將鼠標懸停時，您可以應用圖像和字體顏色更改。

看一看簡單示例at the jsFiddle *。這裏是新的CSS：

.element_1 a { 
    width:130px; 
    margin-left:20px; 
    height:130px; 
    display: block; 
    background: url('http://placekitten.com/200/300') top center no-repeat; 
    color: red; 
} 

.element_1 a:hover{ 
    background-image: url('http://placekitten.com/300/300'); 
    color: green; 
}

在定義:hover狀態，你只需要指定那些正在發生變化，而不是重新說明一切的東西。

*請注意，您的HTML/CSS需要整理。您錯過了您的課程選擇器的.，並且有多個分號。確保你的代碼驗證並沒有這些簡單的錯誤，因爲它們將掩蓋真正的問題。

來源

2013-03-20 16:53:42 CherryFlavourPez

感謝您的快速回復，問題是代碼不是由我寫的，是凌亂的 - 我知道這個:)但是...你的例子[鏈接] http://jsfiddle.net/cherryflavourpez/cV8uh/ [ /鏈接]是關於當文字是在圖片上的情況，我想這樣做：圖片頂部/空格留在底部/文字鏈接 – user2191804 2013-03-20 17:08:30

好了，問題解決了，再次感謝您的快速回復！ – user2191804 2013-03-20 17:11:04

你應該發現很容易用CSS單獨修改。查看[更新的小提琴]（http://jsfiddle.net/cherryflavourpez/cV8uh/），查看您之後的佈局示例。 – CherryFlavourPez 2013-03-20 17:12:10

我沒有看到任何用於更改鏈接顏色的CSS。我想你會指望瀏覽器做到這一點？

您可以通過添加規則到您現有的CSS解決這個問題：

ul.menu li.element_1:hover{ 
color: red; 

width:130px; 
margin-left:20px; 

display: block; background: url(img/menu_1_bw.jpg) top center no-repeat; 
}

另一種方法是把你的圖片和文字的單個元素中，在這種情況下，瀏覽器將應用其自動鏈接亮點整個元素。

來源

2013-03-20 16:55:52

鼠標懸停圖片上的文字改變鏈接的顏色

回答

相關問題