Question

我有一个锚标记，我需要在浏览页面时显示轮廓，点击它时不应显示。我使用了以下代码。

a:focus {
  outline: blue dotted 2px;
  outline-offset: 5px!important;
}

<a href="#" tabindex="0">New link</a>

点击它时是否可以删除轮廓？请帮忙。

Answer 1

明确指定所有可能的状态（默认，活动，聚焦）单击时状态既是活动的又是聚焦状态，但只有在使用Tab键选择时才聚焦（不活动）。

a, a:link, a:active, a:hover {
  outline: none;
}
a:focus:not(:active):not(:hover) {
  outline: blue dotted 2px;
  outline-offset: 5px!important;
}

<a href="#" tabindex="1">New link</a><br>
<a href="#" tabindex="2">Another link</a>

Answer 2

＆＃13;

$(document).ready(function() {
  $("a").on('click', function(e) {
    e.preventDefault();
    $(this).css("outline", "none");
  });

  $("a").on('focus', function(e) {
    e.preventDefault();
    $(this).css("outline", "blue dotted 2px");
  });

  $("a").on('blur', function(e) {
    e.preventDefault();
    $(this).css("outline", "none");
  });
});

＆＃13;

a:focus {
  outline: blue dotted 2px;
  outline-offset: 5px!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" tabindex="0">New link</a>

＆＃13;

锚点的轮廓应仅在通过页面进行选项卡时显示

2 个答案: