隱藏標簽邊框-有解無憂

我試圖隱藏按下時出現的標簽邊框。即 i 按鈕周圍的邊框。我嘗試將輪廓和邊框設定為 0，甚至設定為無，但沒有任何效果。我究竟做錯了什么？

$(document).ready(function(){
    $('#popoverData').popover();
});

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
<label for="download" style="float: left; margin-top: 6px">Content</label>
        <a id="popoverData" class="btn" href="#" data-content="My Content" 
        rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
</div>

</body>
</html>

uj5u.com熱心網友回復：

我假設您指的box-shadow是a.btn，您可以通過添加以下 CSS 規則來洗掉它：

.btn:active {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

$(document).ready(function(){
    $('#popoverData').popover();
});

.btn:active {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
<label for="download" style="float: left; margin-top: 6px">Content</label>
        <a id="popoverData" class="btn" href="#" data-content="My Content" 
        rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
</div>

</body>
</html>

uj5u.com熱心網友回復：

這取決于您的意思：如果單擊并按住按鈕，則會出現陰影（請參閱上一個答案），但是如果您只是單擊按鈕并釋放滑鼠，它將獲得焦點。因此，在這種情況下，您可以為狀態添加 CSS 規則focus，如下所示：

a#popoverData:focus {
  outline: none;
}

但請注意，這將違反可訪問性規則，因為僅通過鍵盤操作導航的人將不再看到選擇/聚焦哪個元素。

完整示例（即上面的規則只是簡單地添加到問題中的代碼中）：

$(document).ready(function() {
  $('#popoverData').popover();
});

a#popoverData:focus {
  outline: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

  <div>
    <label for="download" style="float: left; margin-top: 6px">Content</label>
    <a id="popoverData" class="btn" href="#" data-content="My Content" rel="popover" data-placement="bottom" data-trigger="hover" style="float: left; margin-left: -10px; margin-top: 0px; border: none;">&#x1F6C8;</a>
  </div>

</body>

</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496888.html

標籤：javascript html css

上一篇：為什么我的FontAwesome6.1.1圖示在加載時不顯示？

下一篇：停止div推動另一個div做出反應