:焦点不在标签导航期间处理图像

时间:2014-06-11 13:52:19

标签: html css twitter-bootstrap-3

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中看到)但是我没有得到它周围的蓝色轮廓框。有谁知道我在这里做错了什么?

1 个答案:

答案 0 :(得分:2)

将此更改为a .img-responsive:hover, a .img-responsive:focus {

a:hover .img-responsive, a:focus .img-responsive {
 ....
}

标签转到a标签而不是图片!