在鼠标单击中从锚标记中删除box-shadow

时间:2018-05-17 07:56:41

标签: css css3

单击任何超链接后仍然存在

框阴影。

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

a:使用标签对焦工作正常但由于显示框阴影,如果我点击任何超链接

我的代码如下:

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>

1 个答案:

答案 0 :(得分:0)

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

&#13;
&#13;
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;
  }
&#13;
<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>
&#13;
{{1}}
&#13;
&#13;
&#13;

希望这会有所帮助。