僞類a：焦點

試圖找出更多關於css僞類a：焦點我正在嘗試修改一些代碼。試過僞類a：焦點

a:focus img {border:2px solid rgb(155, 205, 255);}

和

a:focus img {background:rgb(155, 205, 255);}

既不工作。然而，

a:hover img {background:rgb(155, 205, 255);}

工作正常懸停。有誰知道我做錯了什麼？
Les

我使用的是Firefox，但如果可能的話，希望它能夠跨瀏覽器工作。我得到一個閃光燈，但沒有穩定的邊界這樣的畫廊： http://www.cssplay.co.uk/menu/gallery.html#nogo

來源

2010-03-20 Les

它可能有助於告訴我們您正在使用哪種瀏覽器。 – John 2010-03-20 07:24:41

適合我。 - – kennytm 2010-03-20 07:28:49

~~如果你的右鍵單擊它，給它重點不實際以下的鏈接，它是否在改變？~~

來源

2010-03-20 07:25:56

是的。邊界停留。那是什麼意思？ – Les 2010-03-20 08:56:41

我編寫了一個小測試，它適用於我。您正在開發公開的網站，我們可以看看嗎？無論哪種方式，也許嘗試使用！重要的，以防您的網站上的其他風格重寫您發佈的。 http://www.w3.org/TR/CSS2/cascade.html#important-rules – 2010-03-20 10:03:03

我討厭給這個鏈接，這是我的第一個網站，非常可怕。試圖解決，所以請原諒。 http://www.townsvillemultiples.com.au/photosclk.html a：不添加焦點，因爲它不起作用。我正在離線工作，將在工作時上傳。相關的CSS是在頭上，我目前有： ul＃縮略圖li a：hover {background：rgb（145,225,235）;} ul＃縮略圖li a：focus img {background：rgb（155,205 ，255）;} 在我的離線文件中。（在線版本中，您只會看到上面代碼的第一行） – Les 2010-03-20 10:27:11

您的選擇器看起來很好。

幾個問題：您使用的是哪種瀏覽器？正如馬特所說，你確定你正在關注標籤嗎？

來源

2010-03-20 07:27:49 jrallison

Firefox。添加到Q是做錯了嗎？焦點工作，但它只閃爍像懸停和活躍。它應該保持到下一次點擊。 – Les 2010-03-20 09:26:49

如果您使用IE8，

注意：的Internet Explorer 8（或更高版本）支持:focus僞類如果指定了!DOCTYPE。（來源：http://www.w3schools.com/CSS/pr_pseudo_focus.asp）

調查：鑑於你使用Firefox，點擊一個空白頁上，然後按Tab鍵盤上，用下面的CSS：

a:focus img {border:2px solid rgb(155, 205, 255); padding: 2px;}

看看這個作品，並適當報告。

此外，<a>標籤是否有focus以外的其他僞類？

只是一個建議的基礎上，例如夜http://www.cssplay.co.uk/menu/gallery.html#nogo，他們這樣做：

#container a.pics:focus img.thumb {border:1px solid #fc0}

你爲什麼不這樣做呢？

a img:focus {border:2px solid rgb(155, 205, 255); padding: 2px;}

來源

2010-03-20 07:29:16

使用Firefox，但希望獲得最佳的跨瀏覽器結果。 – Les 2010-03-20 09:27:44

使用選項卡將光標放在FF的URL框中。它說：「Firefox不知道如何打開此地址，因爲協議（a）與任何程序都沒有關聯。」標籤懸停，活動和焦點集（按順序）刪除懸停和活動沒有區別。當我右鍵單擊縮略圖時，焦點保持不變。這是好還是壞？我希望它能像這樣的畫廊工作： http://www.cssplay.co.uk/menu/gallery.html#nogo 這有幫助嗎？ – Les 2010-03-21 01:59:22

好吧，關於CSS Play的教程，焦點的作品。檢查：http://www.w3schools.com/CSS/css_pseudo_classes.asp查看''僞類的順序（希望這可以幫助你）。 – 2010-03-21 06:49:01

它看起來像點擊一個鏈接，需要你在同一頁面上的其他地方導致該鏈接鬆動焦點。不是最優雅的解決方案，但我可以想出涉及JavaScript。

對於風格：

a.selected img{border:9px solid green}

然後腳本：

<script type="text/javascript"> 
    var last = null; 
    function select(element) 
    { 
     if(last != null) 
      last.className = last.className.replace(/ selected/g, ""); 
     element.className += " selected"; 
     last = element; 
    } 
</script>

，然後添加一個onclick事件處理程序，每個縮略圖的鏈接：

<li><a href="#pic1" onclick="select(this);"><img src="thumbs/whatever.jpg" alt="whatever" /></a></li>

來源

2010-03-20 11:43:11

謝謝馬特。已經注意到一個下降。已經開始用PHP，但沒有JS，但非常感謝:) – Les 2010-03-21 11:17:30

嘗試設置邊界在一個標籤上而不是它裏面的圖像標籤。

來源

2010-03-20 23:06:28 Catfish

你的意思是 ul＃縮略圖li a：focus {background：green;} 這給出了相同的結果。焦點只適用於右鍵單擊。按照我的評論的格式化規則，但看到它不起作用。對不起，糟糕的格式 - 不知道如何解決它。 – Les 2010-03-21 03:57:24

僞類a：焦點

回答

相關問題