我在HTML页面中有以下代码:
<img id="image_java" alt="image_not" src="images/java-icon.png">
在CSS页面中有以下代码:
#image_java: focus {
outline: 2px solid blue;
}
我也尝试过:
img:focus{
outline: 2px solid blue;
但是它们似乎都不起作用,它们应该在焦点时显示图像的蓝色边框。 有人知道怎么做吗?谢谢!!!
实际上,您可以通过使用 tabindex
属性来使 <img>
元素聚焦:
img:focus {
outline: 2px solid blue;
}
<img src="http://www.w3schools.com/images/w3logotest2.png" tabindex="0">
如果没有交互元素或者通过 tab 导航到图像,你无法“聚焦”图像。尝试在包装 div 上添加一个交互元素,如下所示:
Html
<a class="imageAnchor" href="#">
<img id="image_java" alt="image_not" src="http://www.w3schools.com/images/w3logotest2.png" />
</a>
CSS.imageAnchor:focus img{
border: 2px solid blue;
}
img:hover {
border: 2px solid blue;
}
编辑: 使用hover而不是focus