Question

问候，

我正在建立一个网站：悬停图片作为链接的背景。但奇怪的是，只有第一个链接正在工作。其他人不像链接那样行事，也不会对：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>

第一个实际上去了正确的位置。其他三个不向浏览器提供任何反馈，即它们是链接，并且在单击时不执行任何操作。这是我的germane 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中。

有什么想法吗？

Answer 1

您只使用ID：

定位一个链接

#home-link:hover

请改用此CSS：

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

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

Answer 2

修正了它！

通过取出并添加CSS块，我能够发现另一个特定的HTML块，它位于页面中的链接之后并且绝对定位了它们。

因为它位于链接之上，所以它们没有被解雇。所以我把它移到链接下面，一切都很有用。

Answer 3

#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”，因此您不会遇到问题...

CSS：悬停属性行为不一致

3 个答案: