如何获得“悬停”和“积极的”国CSS和HTML工作？ [英] How to get 'hover' and 'active' states working with CSS and HTML?

问题描述

我有一个头在我的网站上（它不是活在此刻，所以我不能提供一个链接 - 抱歉）3菜单项。 3按钮是不是在CSS按钮感应按钮 - 他们的文字渲染到图像（不理想，但我知道他们期待pretty，所以......）

I have 3 menu items in a header at the top of my website (it's not live at the moment so I can't provide a link - sorry). The 3 'buttons' are not buttons in the CSS buttons sense - they're text rendered to images (Not ideal, I know but they look pretty, so...).

无论如何，每个图像都包含不同的版本：1的默认外观，1鼠标悬停和另一个的onclick /主动。 HTML和CSS我使用的是到目前为止是这样的：

Anyway, each image contains differing versions: 1 for the default appearance, 1 for mouseover and another for onclick/active. The html and CSS I'm using so far looks like this:

HTML

<li>
    <a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
    <a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
    <a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background: url(../Buttons/About.png) no-repeat 0 0; width: 87px;}
#Services {background: url(../Buttons/Services.png) no-repeat 0 0; width: 112px;}
#Contact {background: url(../Buttons/Contact.png) no-repeat 0 0; width: 117px;}
a.button {height: 20px; display: inline-block;}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

有关某种理由中，悬停和活跃状态有没有影响。我注意到，如果我定义每个按钮，而不是ID的类，它工作正常 - 但这样做没有意义的我。每个人都有自己的形象和宽度等的按钮是唯一的（这就是为什么我给他们的id而不是类）。

For one reason or another, the 'hover' and 'active' states are having no effect. I note that if I define classes for each of the buttons instead of id's, it works fine - but this makes no sense to me. The buttons each have their own image and widths and so are unique (which is why I've given them id's rather than classes).

谁能解释我要去哪里错了吗？我是新来的这一切，所以任何解释将需要在外行的条款。

Can anyone explain where I'm going wrong? I'm new to all this so any explanations will need to be in laymen's terms.

推荐答案

的问题是，你的ID选择比你级+ pseudoselector组合更加具体。但是，如果你不指定在ID选择器的位置，你会没事的。 EG：

The problem is that your ID selectors are more specific than your class + pseudoselector combination. But if you don't specify the position in the ID selector, you'll be fine. EG:

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

这篇关于如何获得“悬停”和“积极的”国CSS和HTML工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！