CSS：懸停屬性行爲不一致

我正在做一個網站：懸停圖像作爲鏈接的背景。但奇怪的是，只有第一個鏈接是工作的。其他人不像鏈接，並且不會對：懸停事件做出反應。

這裏是有密切關係的HTML：

<a href="/" id="home-link" class="icon">Home</a> 
<a href="skills/" id="skills-link" class="icon">What I Can Do</a> 
<a href="portfolio/" id="portfolio-link" class="icon">My Portfolio</a> 
<a href="connect/" id="connect-link" class="icon">Connect With Me</a>

第一個真正進入到正確的位置。其他三個人不會給瀏覽器任何反饋，說他們是鏈接，點擊時什麼也不做。這是我的密切相關的CSS：

#home-link { 
    background: url(icons-sprite.png) no-repeat 0 0; 
    top: 30px; 
    left: 30px; 
} 

#home-link:hover { background: url(icons-sprite.png) no-repeat 0 -128px; } 

#skills-link { 
    background: url(icons-sprite.png) no-repeat -128px 0; 
    top: 178px; 
    left: 286px; 
} 

#skills-link:hover { background: url(icons-sprite.png) no-repeat -128px -128px; }

其他兩個鏈接的樣式是相同的。

第一個顯示：懸停狀態完美。其餘的則保持惰性。

我推斷我的HTML有些問題，但我沒有看到他們的錯。這發生在FF和Chrome中。

任何想法？

來源

2010-07-31 Sir Emeth

你的目標只有一個使用id鏈接：

#home-link:hover

使用此CSS來代替：

#container a:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

哪裏#container是包含您的鏈接元素的ID。

來源

2010-07-31 13:44:14 Sarfraz

該解決方案將無法定位所有4個鏈接，因爲每個鏈接在精靈中都有不同的x位置。 – 2010-08-02 07:11:19

#home-link {...} 
#home-link:hover {...}

使用這個，你正在尋找thw唯一具有id'home-link'的元素，這是你的第一個鏈接。由於各個環節都有不同勢的id他們不使用你的CSS塊...

嘗試使用類定義，而不是ID：

.icon { 
background: url(icons-sprite.png) no-repeat 0 0; 
top: 30px; 
left: 30px; 
} 

.icon:hover { background: url(icons-sprite.png) no-repeat 0 -128px; }

由於所有鏈接都CLASS =「圖標」，你不會有問題...

來源

2010-07-31 13:50:45 FallenAngel

就像上面的解決方案一樣，它不會工作，因爲有4個圖標，每個圖標在精靈中都有不同的x座標。正如我所提到的，真正的問題是定位問題。 – 2010-08-02 07:12:24

修好了！

通過取出並添加CSS塊，我能夠發現在頁面中的鏈接之後的另一個特定的HTML塊被絕對定位了。

因爲它位於鏈接的頂部，所以它們沒有發射。所以我把它移到鏈接下面，一切都很正常。

來源

2010-07-31 13:54:27

CSS：懸停屬性行爲不一致

回答

相關問題