創建一個css按鈕的當前狀態

夥計們我正在嘗試並且無法在我的css按鈕上創建當前的視圖狀態......精靈有兩個狀態，一個關閉狀態...我想要過狀態也可以在頁面上目前的狀態正在查看....這裏是按鈕的CSS以及在html：創建一個css按鈕的當前狀態

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），只是調整定位以匹配over狀態，不像懸停但沒有負值，但它沒有工作。

在此先感謝帥哥

來源

2013-02-21 designer

「當前視圖狀態」是什麼意思？ – 2013-02-21 00:04:25

你很近。你會有一堂課。 :hover是一個僞類。你不能真的「強制」這個懸停。你可以做什麼，雖然是添加一個類，如：

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

所以，現在你的CSS說該類收件箱
和

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

，徘徊的時候，設定的BG位置。而且，當類收件箱也與類電流的元件上發現的，採用同樣的BG位置規則

如果你想使用一個類，你可以做

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

那麼你CSS

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

相同的結果，但對於舊的瀏覽器

來源

2013-02-21 00:05:38

哇謝謝，那該死的簡單太工作了，謝謝！ – designer 2013-02-21 00:09:42

我不知道你問什麼，但你總是可以擴展規則集：

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

那麼如果.inbox要麼正徘徊或有.current類，它會出現在懸停狀態。你也可以使用:focus和:active

來源

2013-02-21 00:05:29

是得到它的傢伙，謝謝百萬 – designer 2013-02-21 00:09:58

存在CSS沒有真正的當前狀態更多的支持，你必須手動設置你的自我與JavaScript（jQuery的）或設置它當你加載頁面。即。有一流的收件箱和類電流作爲兩個單獨的類，並有

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

和收件箱中檢測一下，從所有其他按鈕刪除當前，並將其添加到收件箱。

來源

2013-02-21 00:06:24 bizzehdee

呃希望它可以是無javascript的 – designer 2013-02-21 00:07:52

創建一個css按鈕的當前狀態

回答

相關問題