アンカー要素の強調表示を削除するにはどうすればよいですか？

Question

私は<ul>要素で生成されたこのhtml要素のアンカーを持っています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav pull-left">    
 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a></li> 
 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a></li>   
 
</ul>

私はそれがハイライト表示されたリンクの上にマウスを移動すると。

どのようにハイライトを削除できますか？

Answer 1

ブートストラップのCSSルールの一つは次のとおりです。

.nav > li > a:focus, .nav > li > a:hover { 
    text-decoration: none; 
    background-color: #eee; 
} 

単にあなた自身の、より具体的なルールとそれをオーバーライドします。

.nav.pull-left>li>a:focus, .nav.pull-left>li>a:hover { 
    background-color: transparent; 
} 

例：

.nav.pull-left>li>a:focus, 
 
.nav.pull-left>li>a:hover { 
 
    background-color: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav pull-left"> 
 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a> 
 
    </li> 
 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a> 
 
    </li> 
 
</ul>

Answer 2

カスタムCSSを追加して、ブートストラップスタイルを上書きすることができます。

.nav>li>a:hover { 
 
    background-color: transparent !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<ul class="nav pull-left">    
 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a></li> 
 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a></li>   
 
</ul>

*あなたは、ブートストラップCSSの後にあなたのカスタムスタイルが含まれている場合、!importantのために必要がないに注意してください。または、好きな場合は、j08691の回答のようなより具体的なセレクタを作成することができます。

Answer 3

あなたのスタイルシートにこれを追加します。

a:hover { 
    background-color: transparent !important; 
} 

Answer 4

あなたは、単にCSSの階層を使用することができ、あなたのカスタムCSSファイル

ul.nav.pull-left a:hover { 
    background: none; 
} 

Answer 5

にこれを追加します。

HTML：

<ul class="nav pull-left">    
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sites.list"><i class="glyphicon glyphicon-tree-conifer"></i> <br>sites</a></li> 
    <li style="display: inline-block;text-align: center;"><a class="" ui-sref="sitesDamages.sitesList"><i class="glyphicon glyphicon-exclamation-sign"></i> <br>events</a></li>   
</ul> 

CSS：

ul.nav>li>a:focus, ul.nav>li>a:hover { 
    background-color: transparent; 
} 

https://jsfiddle.net/rLxnczdp/

Answer 6

これは問題であるため、ブートストラップCSSのです。

.nav>li>a:focus, .nav>li>a:hover { 
     text-decoration: none; 
     background-color: #eee; 
    } 

    a:focus, a:hover { 
     color: #23527c; 
     text-decoration: underline; 
    } 

この問題は、CSSを追加するだけで簡単に解決できます。

a { 
    color: #337ab7; 
    text-decoration: none; 
} 
.nav>li>a:hover { 
    background-color: transparent !important; 
    color: #337ab7; 
} 

カラープロパティを指定すると、ホバーカラーの変更が削除されます。

は、ブートストラップは、すでに彼らのスタイルが設定されているので、これは問題である。この

Answer 7

を試してみてください。自分のスタイルを独自のスタイルで上書きすることができます。

あなたのスタイルシートにこれを追加します。

.nav>li>a:hover, 
.nav>li>a:focus { 
    background-color: transparent !important; 
}