Question: I'm using bootstrap for my website with a link that opens a new tab. In my desktop browser, the link remains focused(red) after I close the tab(without moving my mouse pointer in the window).

I added `onclick="this.blur()` to remove the focus(red), but `hover` is still in effect(green).

How to I remove both focus and hover?

CSS file:

```
a {
  color:black;
}
a:hover {
  color:green;
}
a:focus {
  color:red;
}

```

HTML file:

```
<a href="https://www.google.com" target="_blank" onclick="this.blur();">google</a> 

```

Answer: 
simply override it in CSS using the same color as the link, 

```css
a, a:hover, a:focus{
  color:black;
}

```

and if you want, you can override `:visited` and `:active` too

```css
a, a:hover, a:visited, a:active, a:focus{
  color:black;
}

```

---

Here is a snippet

```css
a,
a:hover,
a:visited,
a:active,
a:focus {
  color: black !important;
}

/*important used for demo only*/
```

```html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<a href="https://www.google.com" target="_blank">google</a>
```
Use this:

```
a:active, visited {
  color:black;
}

```

`active` is the state a link has after you clicked it. You won't loose the hover effect in this case.