CSS/JavaScriptを使用してリンクを解除するにはどうすればよいですか？

Question

私はそれらの上にマウスを置いたときに私のリンクを赤に設定するためにCSSを使用しています。それらをクリックすると新しいタブが開きますが、私のリンクはホールドされたままです（赤色）。ボタンをクリックするとアンホーバーすることはできますか？これは本当に悪いように見えます。私達はちょうどそれをクリックしたとどこにもクリックされていない後

CSS: 
a:hover { 
color: red; 
} 

HTML: 
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a> 

Answer 1

リンクの状態、すなわちaタグがfocusです。だから、ほとんどの場合、アンカータグの状態を:focusのスタイルに変更する必要があります。

CSS: 
a:hover { 
color: red; 
} 
a, 
a:focus 
{ 
    color: green; /* or whichever is your default color */ 
} 

/* You can also add same or different style for a:visited state, which applies to anchor tags which have been visited */ 

HTML: 
<a href="www.example.com" target="_blank">Open site in new tab, remains red</a> 

Answer 2

一つの方法は、あなたが（この例では、jQueryのを使用しています）

その推移しまたはクリックされていないとき、元の背景色を持っているボタン..

にクラスを追加することができますクリックであります

$('.button').click(function() { 
 
\t $(this).addClass('button-onclick'); 
 
})

body { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
.button { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: red; 
 
    border-radius: 100%; 
 
} 
 
.button:hover { 
 
    background-color: green; 
 
} 
 
.button-onclick:hover { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="button">clickers</div>

フィドル

https://jsfiddle.net/Hastig/hL4dt60k/