CSS :hover 属性行为不一致答案

【问题标题】：CSS :hover attribute behaving inconsistentlyCSS :hover 属性行为不一致
【发布时间】：2011-03-23 15:25:37
【问题描述】：

您好，

我正在制作一个带有 :hover 图像作为链接背景的网站。但奇怪的是，只有第一个链接在起作用。其他的不像链接，也不对 :hover 事件做出反应。

这里是相关的 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; }

其他两个链接的样式相同。

第一个完美地显示了 :hover 状态。其余的保持惰性。

我推断我的 HTML 有问题，但我认为它们没有任何问题。这发生在 FF 和 Chrome 中。

有什么想法吗？

【问题讨论】：

标签： html css hyperlink hover

【解决方案1】：

您仅使用 id 定位一个链接：

#home-link:hover

改用这个 CSS：

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

#container 是包含您的链接的元素的 ID。

【讨论】：

该解决方案无法定位所有 4 个链接，因为每个链接在 sprite 中都有不同的 x 位置。

【解决方案2】：

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

使用它，您正在处理唯一具有 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="icon"，所以您不会有问题...

【讨论】：

像上面的解决方案一样，这不起作用，因为有 4 个图标，每个图标在精灵中都有不同的 x 坐标。正如我所提到的，真正的问题是定位问题。

【解决方案3】：

修好了！

通过取出和添加 CSS 块，我能够发现页面中链接之后的另一个特定 HTML 块完全被定位正在搞乱它们。

因为它位于链接的顶部，所以它们没有触发。所以我把它移到了链接下面，一切正常。

【讨论】：