如何在制图时在图像上显示边框？

我正在建立我的第一个网站。规范的很大一部分是它应该非常用户友好。如何在制图时在图像上显示边框？

我在我的主页的顶部有一些图像，附有超链接。它们有一个灰色边框，当它悬停在图像上时会变成粉红色。

我的问题是，我可以选中我的图像，并打开链接被打开的返回结果，所以很好，但我的边框不改变颜色，当我有选项卡，所以它很难如果不是不可能知道您目前选中的图片。

边界代码：

<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

如何在制图时在图像上显示边框？

回答

相关问题