Question

伙计们我正在尝试并且未能在我的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）并调整定位以匹配过度状态，不像悬停但没有负值，但它没有用。

先谢谢老兄

Answer 1

你很亲密。你会上课。 :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;
}

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

Answer 2

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

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

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

Answer 3

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

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

然后，如果.inbox被悬停或拥有.current类，则它将显示在悬停状态。您还可以使用:focus和:active

创建css按钮的当前状态

3 个答案: