0

伙计们，我正在尝试在我的 css 按钮上创建当前视图状态，但未能成功......精灵有两种状态，关闭和结束状态..我希望结束状态也成为页面上的当前状态正在查看....这里是按钮的 css 以及 html：

CSS：

.inbox {
    border: none;
    width: 88px;
    height: 26px;`enter code here`
    background: url(images/v2images/default_inbox_BTN.png) no-repeat top left;
    margin-left: 0px;
    margin-right: 20px;
    vertical-align: middle;
    cursor:pointer;
}

.inbox:hover {
        background-position: -88px 0;
}

html:

<input type="submit" value="" class="inbox" />

我假设我将只创建一个当前状态（.inbox:current）并调整定位以匹配过度状态，这与悬停但没有负值不同，但它不起作用。

在此先感谢伙计们

4

3 回答 3

2

你很近。你会有一堂课。 :hover是一个伪类。您不能真正“强制”悬停。但是，您可以做的是添加一个类，例如：

.inbox:hover
, .inbox.current
{
        background-position: -88px 0;
}

和

<input type="submit" value="" class="inbox current">

所以现在你的 CSS为类收件箱说，当悬停时，设置 bg 位置。但是，当类收件箱也在类当前的元素上找到时，应用相同的 bg 位置规则

如果你想使用一个类，你可以做

<input type="submit" value="" class="inbox inbox-current">

然后你的CSS

.inbox:hover
, .inbox-current
{
        background-position: -88px 0;
}

结果相同，但对旧浏览器的支持更多

于 2013-02-21T00:05:38.913 回答
1

CSS 中没有真正的当前状态，您必须使用 javascript (jquery) 手动设置它，或者在加载页面时设置它。IE。将类收件箱和当前类作为两个单独的类，并具有

.current { background-position: -88px 0 !important; }

并检测点击收件箱，从所有其他按钮中删除当前，并将其添加到收件箱。

于 2013-02-21T00:06:24.160 回答
0

我不确定你在问什么，但你总是可以扩展规则集：

.inbox:hover, .current {
    background-position: -88px 0;
}

然后如果.inbox是被悬停或有.current类，它将出现在悬停状态。你也可以使用:focus和:active

于 2013-02-21T00:05:29.630 回答