How do I unhover on a link using CSS/JavaScript?

Question

I'm using CSS to set my links to red when I hover over them. Clicking on them would open a new tab, but my links would remain hovered(red). Is it possible to unhover on a button click? This looks really bad, especially on mobile.

CSS:
a:hover {
color: red;
}

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

I believe its state is focus not hover. You could possibly add a different style for the focused state. — Arathi Sreekumar
– Arathi Sreekumar, Commented Jul 4, 2016 at 15:42

Mohit Bhardwaj · Accepted Answer · 2016-07-04 15:49:30Z

0

The state of the link i.e. a tag is focus after we have just clicked on it and have not clicked anywhere else. So, most probably you want to change the style for :focus state of your anchor tag.

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>

edited Jul 4, 2016 at 15:49

answered Jul 4, 2016 at 15:45

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mxlse Over a year ago

Moreover you can style the a:visited-state if you want to.

iamarnold Over a year ago

@MohitBhardwaj I tried both focus and visited, but it doesn't seem to work that well for mobile. On iOS safari, if I open a link that to a site that has a mobile version(opening linkedin website opens the linkedin app instead) and switch back to Safari, the link would still remain red. Is there a way to unfocus after clicking?

Mohit Bhardwaj Over a year ago

@iamarnold That red color goes away if you click on some other link, or somewhere else on the code?

iamarnold Over a year ago

@MohitBhardwaj Yes it goes away if I click somewhere, but it doesn't look that good on mobile if the user has to tap on somewhere else for the focus to go away.

Mohit Bhardwaj Over a year ago

@iamarnold try with a:focus{ color: green !important; }. I think :focus should solve your problem, but something might be overriding your style. So, adding !important should help.

|

Hastig Zusammenstellen · Accepted Answer · 2017-05-13 06:48:25Z

One way is on click you can add a class to the button that has the original background color when its not being hovered or clicked..

(This example uses Jquery)

$('.button').click(function() {
	$(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>

fiddle

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

Collectives™ on Stack Overflow

How do I unhover on a link using CSS/JavaScript?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related