앵커 요소에서 강조 표시를 제거하는 방법은 무엇입니까?

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

하나는 :

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

예 :

.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; 
 
}

<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를 추가하여 부트 스트랩 스타일을 덮어 쓸 수 있습니다.

* 당신은 당신의 부트 스트랩 CSS 후 사용자 지정 스타일을 포함하는 경우 !important 거기에 필요하지 않습니다,을 참고

.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>

. 또는 원하는 경우 j08691의 대답과 같이보다 구체적인 선택기를 만들 수 있습니다.

Answer 3

스타일 시트이 추가 :

부트 스트랩의 CSS 규칙의

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

Answer 4

사용자 정의 CSS 파일

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

Answer 5

당신은 단순히 CSS를 계층 구조를 사용하여이를 추가합니다.

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; 
}