如何使用偽類為背景圖像設置div樣式：active：visited：hover？

Question

我有4個div，想要像這樣設計：

http://jsfiddle.net/AcvbG

HTML：

<a href="http://test" id="topleftbox"></a>

CSS：

#topleftbox {
  background: red;
  background-repeat: no-repeat;
  width: 229px;
  height: 228px;
  float: left;
  }

 #topleftbox:hover {
  background: blue;
  }

 #topleftbox:active {
  background: green;
  }

 #topleftbox:visited {
  background: yellow;
  }

但用背景圖像替換顏色。 ：hover工作，但是：visit和：actived沒有生效。

誰知道解決方案？ 我對javascript的知識有限，所以我希望有辦法解決這個問題。

Answer 1

你的：visited和：actived偽類在jsFiddle中不可見，因為href =“http：// test”。 因此，您需要訪問頁面測試以查看：在操作中訪問過..並且您需要在測試頁面上查看：活動在行動中。

在這里， 我為你做了一個小提琴

你可以看到.css的不同之處

.topleftbox:hover {
    background: blue;
}
.topleftbox:visited {
    background: yellow;
}
.topleftbox:visited:hover {
    background: pink;
}
.topleftbox:active {
    background: green;
}

此外，您應該檢查定義樣式的ORDER。

a：鏈接{color：red} / *未訪問的鏈接* /

a：訪問過{color：> blue} / *訪問過的鏈接* /

a：懸停{color：yellow} / *用戶懸停* /

a：有效{color：lime} / *有效鏈接* /

請注意，A：hover必須放在A：link和A：visited規則之后，否則級聯規則將隱藏A：hover規則的'color'屬性。 同樣，因為A：active位於A：hover之后，當用戶激活並懸停在A元素上時，將應用活動顏色（lime）。

組合動態偽類的示例：

a：焦點{背景：黃色} a：焦點：懸停{background：white}

最后一個選擇器匹配偽類中的A元素：focus和偽類：hover。

Answer 2

在現代瀏覽器中，CSS可以在不使用javascript的情況下處理您想要的內容。

http://jsfiddle.net/CWkdY/10/

需要注意的一點是，您的標識符可以通過在您的ID聲明前添加“a”來辨別您的ID是鏈接而受益。 您的初始定義也將受益於'display：block'。 像這樣：

a#topleftbox {
  background: url('http://d241yswl6yg9sc.cloudfront.net/linen-texture2/top-new.jpg');
  width: 229px;
  height: 228px;
  float: left;
  display:block;
  }

如果您發現圖像最初未顯示，請嘗試使用此小技巧緩存您需要使用的所有圖像。 你有一個div與所有圖像，在一邊，但隱藏。

http://perishablepress.com/css-image-caching/