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：悬停属性行为不一致

回答

相关问题