Link stays on its hover property when target="_blank"

Whenever I set a link to open up into a new window and return to the previous one the hover properties set for it stick but when I mouse back in to the window it changes back to normal. How can I fix this without using Javascript?

HTML:

<a href="google.com" target="_blank">Google</a>

CSS:

a:link, a:visited, a:active {color: blue;}

a:hover {color: red;}

JSFiddle

http://jsfiddle.net/5EXFB/


I had a similar issue with a link styled as a button that was keeping its hover font color when the click action was to open a new window. The issue is that the link retains focus (which holds the hover style) until you click on something else, which is apparently an accessibility thing. The workaround I came up with is to add a :focus style and a :focus:hover style to mimic the regular a and a:hover styles.

a, a:focus { color: blue }
a:hover, a:focus:hover { color: white }

Link stays on its hover property when target=“_blank”, Whenever I set a link to open up into a new window and return to the previous one the hover properties set for it stick but when I mouse back in to the window it​  A pop up with the full link address pops up over what I'm hover my mouse over. How do I change this setting permanently it's very annoying. and . No I don't understand how to make it stop I'm using windows 10 Edge. Thank you This URL info should be appearing in the Status Bar where it's not blocking anything.


Update: It doesn't look like there is a way to do it in Chrome. Even setting focus to another element behind the scenes doesn't

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
    a:link {color: blue;}
    a:hover {color: red; background-color:yellow}
    a:active {color: red;}
    </style>
</head>
<body>
<input type='text'>Click this: </input>
<a href="http://yahoo.com" target="_blank">yahoo</a>
<script>
    $('a').click(function() {
        $('input').focus();
    });
</script>
</body>
</html>

Update: My code below doesn't work in IE or Chrome. In IE, when you switch back to the window, the active focus is already gone and in Chrome the mouseover definitely removes the active focus. In fact, I think the active focus is already gone once the target window opens, it is just that IE repaints immediately and Chrome repaints later.

=======================

Move the :active to be the same as the :hover:

a:link, a:visited, {color: blue;}

a:hover, a:active {color: red;}

That should work in the situation you describe which is to mouseover the window again. If, however, you click in the window, the link will no longer be the active element, so the style will be lost as well.

How to disable a CSS :hover effect?, and style of link when a user hovers over it. If we have many nested elements that share the same styles, this will avoid us complex selector to target all of them on hover. Using Custom properties, we simply change the value when hovering on the parent element. A custom property can be used to replace a value of any property and also a partial value of it.


I had the same problem. :visited worked for me while :focus did not. With visited, it selects the link that has already been visited by the current browser. Focus is for those who used keyboard navigation to get to the link. :focus will select links that are the current focus of the keyboard.

&:visited { color: $color--tory-blue;       
background-color: $color--white;}

&:hover{color: $color--white;       
background-color: $color--tory-blue;}

Hover Definition, How do I keep active CSS after clicking a link? Select whether you want your overlay to appear on Click or Hover. If you want your overlay to appear on hover, also decide whether you want to remain on the target screen when your overlay is opened. If you select the Stay on target screen checkbox, your overlay will stay open until you click outside the overlay or click a Link Back / Close hotspot that you've set on your overlay screen.


How to keep :active css style after click a button, How do you style the parent element when hovering a child element? Styling links as buttons. The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.


:hover, The :hover CSS pseudo-class matches when the user interacts with an To style links appropriately, put the :hover rule after the :link and  Definition and Usage. The :hover selector is used to select elements when you mouse over them.. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.


Adjust the Hover State of an Anchor Tag - Problem!, I've successfully added the :hover pseudo-class. <a href="http://​freecatphotoapp.com/" target="_blank">CatPhotoApp</a> Link to the challenge​: as firefox wouldn't work (a stays blue with color: #000 or color: black). Hover your cursor over the link to reveal the URL without clicking on it and accessing its destination site. Inspect Short Links One clue that your link may be dangerous is that the URL seems too short.