[英]:focus not working on images during tab navigation
HTML:
<div id="banner" class="col-md-12 hidden-sm hidden-xs">
<a href="http://www.zhaw.ch/de/zhaw.html">
<img class="img-responsive" id="zhaw_logo" src="fileadmin/media/images/zhaw_logo_de.gif" alt="ZHAW Homepage" />
</a>
<a href="http://www.engineering.zhaw.ch/de.html">
<img class="img-responsive" src="fileadmin/media/images/InIT_header.png" alt="School of Engineering Homepage" />
</a>
</div>
CSS:
a .img-responsive:hover, a .img-responsive:focus {
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
/* IE6-9 */
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
将鼠标悬停在图像上时,会得到想要的蓝色阴影轮廓。 但是,如果我尝试使用Tab键浏览网页,则会选择图像中的链接(我在Firefox中可以看到它),但周围没有蓝色轮廓框。 有人知道我在这里做错了吗?
将其更改为a .img-responsive:hover, a .img-responsive:focus {
a:hover .img-responsive, a:focus .img-responsive {
....
}
标签要到a
标签而不是图像!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.