如何在製圖時在圖像上顯示邊框？

我正在建立我的第一個網站。規範的很大一部分是它應該非常用戶友好。如何在製圖時在圖像上顯示邊框？

我在我的主頁的頂部有一些圖像，附有超鏈接。它們有一個灰色邊框，當它懸停在圖像上時會變成粉紅色。

我的問題是，我可以選中我的圖像，並打開鏈接被打開的返回結果，所以很好，但我的邊框不改變顏色，當我有選項卡，所以它很難如果不是不可能知道您目前選中的圖片。

邊界代碼：

<style> 
IMG.HoverBorder {border:1px solid #eee;} 
    IMG.HoverBorder:hover {border:1px solid #FC359A;} 
</style>

來源

2014-11-03 DarkBlueMullet

你試過'：focus'？ - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus – 2014-11-03 12:59:19

不知道，謝謝！ – DarkBlueMullet 2014-11-03 13:10:00

的:focus僞類匹配具有聚焦元件，但一個img元件通常不具有（並且不必具有）焦點。但構成鏈接的a元素是可以聚焦的，因此您需要使用與img元素相匹配的選擇器，該元素是聚焦元素的子元素。例如（使用3px的粗邊框只是爲了清楚起見）：

IMG.HoverBorder { border: 3px solid #eee; } 
 
IMG.HoverBorder:hover { border: 3px solid #FC359A; } 
 
a:focus IMG.HoverBorder {border-color: green;} 
 
img { vertical-align: bottom; } /* to make border sit tight around */

<input placeholder="Click here and press TAB"> 
 
<a href="foo"><img class=HoverBorder src="http://lorempixel.com/100/50" alt=dummy1></a> 
 
<a href="bar"><img class=HoverBorder src="http://lorempixel.com/100/100" alt=dummy2></a>

來源

2014-11-03 13:26:52

輝煌，完美的作品。謝謝你解釋清楚！ – DarkBlueMullet 2014-11-03 20:26:38

如何在製圖時在圖像上顯示邊框？

回答

相關問題