css - 单击鼠标从 anchor 标记中删除框阴影

Question

点击任何超链接后框阴影仍然存在。

a:focus {
    box-shadow: 0 0 3px 7px green;
  }

a:focus 在 tab 上工作正常，但由于它显示框阴影，如果我点击任何超链接。

我的代码如下:

a:link {
    color: darkblue;
  }
  
  a:visited {
    color: grey;
  }
  
  a:focus {
    box-shadow: 0 0 3px 7px green;
  }
  
  a:hover {
    background-color: black;
    color: white;
  }
  
  a:active {
    background-color: blue;
    color: white;
  }

<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<h2>Anchor tag</h2>
  <a href="http://www.google.com">Visit our HTML Page</a>
  <p>&nbsp;</p>

  <h2>Anchor tag with i tag</h2>
  <a href="http://www.google.com" target="_blank"> <i> Visit our HTML Page </i> </a>
  <p>&nbsp;</p>

  <h2>Anchor tag with span tag</h2>
  <a href="http://www.google.com" target="_blank"> <span> Visit our HTML Page </span> </a>
  <p>&nbsp;</p>

  <h2>Anchor tag with img icon</h2>
  <a href="http://www.google.com" target="_blank">
    <img src="data:image/png;base64,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"
      alt="icon" width="36" height="36">
  </a>
  <p>&nbsp;</p>

  <h2>Anchor tag with fontawesome icon</h2>
  <a href="http://www.google.com" target="_blank">
    <i class="fas fa-user"></i>
  </a>
  <p>&nbsp;</p>

Answer 1

如果您愿意，您可以使用一点 jQuery 来实现:

$( "a" ).on( "click", function() {
  $( this ).css( "box-shadow", "none" );
});

a:link {
    color: darkblue;
  }
  
  a:visited {
    color: grey;
  }
  
  a:focus {
    box-shadow: 0 0 3px 7px green;
  }
  
  a:hover {
    background-color: black;
    color: white;
  }
  
  a:active {
    background-color: blue;
    color: white;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet"/>
<h2>Anchor tag</h2>
  <a href="http://www.google.com">Visit our HTML Page</a>
  <p>&nbsp;</p>

  <h2>Anchor tag with i tag</h2>
  <a href="http://www.google.com" target="_blank"> <i> Visit our HTML Page </i> </a>
  <p>&nbsp;</p>

  <h2>Anchor tag with span tag</h2>
  <a href="http://www.google.com" target="_blank"> <span> Visit our HTML Page </span> </a>
  <p>&nbsp;</p>

  <h2>Anchor tag with img icon</h2>
  <a href="http://www.google.com" target="_blank">
    <img src="data:image/png;base64,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"
      alt="icon" width="36" height="36">
  </a>
  <p>&nbsp;</p>

  <h2>Anchor tag with fontawesome icon</h2>
  <a href="http://www.google.com" target="_blank">
    <i class="fas fa-user"></i>
  </a>
  <p>&nbsp;</p>

希望这对您有所帮助。