3

I have an anchor element. When it is clicked, the text Hello color changes. When clicked again, the text Hello reverts back to the original color. 

$(document).ready(function() {
  $('.link').on('click', function() {
    $(this).toggleClass('link-active');
  });
});
.link {
  color: red;
  cursor: pointer;
}

.link:hover {
  background-color: blue !important;
  color: black !important;
}

.text1 {
  font-size: 32px;
}

.text2 {
  font-size: 16px;
  color: black
}

.link.link-active {
  background-color: blue;
  color: black !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link">
  <div class="text1"><span>Hello</span></div>
  <div class="text2">fixed size text</div>
</a>
<a class="link">
  <div class="text1"><span>Hello</span></div>
  <div class="text2">fixed size text</div>
</a>

Current behavior in mobile device: when anchor element is clicked from initial state (Hello text is red), the Hello text changes to black. When clicked again, while in black state, color does not change to red. It changes only after, I click anywhere in the body outside of the anchor element.

On desktop, it changes only after, i move the cursor away from the anchor element.

What I want is: Hello text, changes color every time clicked.

What could be the reason for this behavior?

TylerH
  • 20,799
  • 66
  • 75
  • 101
usb2018
  • 31
  • 1
  • 1
    you dont need !important. – karthick Mar 08 '18 at 18:50
  • Possible duplicate of [Disable hover effects on mobile browsers](https://stackoverflow.com/questions/8291517/disable-hover-effects-on-mobile-browsers) – Phiter Mar 08 '18 at 18:54
  • 1
    You defined the same style for `:hover` as for your active link. So while you're hovering over the element you won't see the restored orginal color, just after you move away from the element. Remove or change the `:hover` style definition and you'll see it working properly. – András Szepesházi Mar 08 '18 at 19:50

0 Answers0