hover button background color remains on mobile

Question

I styled a button: .subscribe_button { background-color: red; } .subscribe_button:hover { background-color: black; } When I hover over the button, it turns black. However, on mobile, the background color of the button remains black even after hover. So I hover over the button, it turns black and remains black How do I prevent it from remaining black after hover? JavaScript questions and answers, JavaScript questions pdf, JavaScript question bank, JavaScript questions and answers pdf, mcq on JavaScript pdf, JavaScript questions and solutions, JavaScript mcq Test , Interview JavaScript questions, JavaScript Questions for Interview, JavaScript MCQ (Multiple Choice Questions)

Answer 1

begin EDIT by S3C on 2019-12-03 This solution should work, if all is set properly. But I just stumbled upon a case of code-salad (a very unorganized bunch of CSS files in different directories, same styling rules are being overwritten way too many times, lots of !importants, etc.). We were on a tight budget and it had to be finished very quickly. In this case I needed this solution in navigation where all navigation links are in tags for desktop version of the site, and in or

tags (styled with bootstrap class="btn") for mobile version of the site. The following CSS was the one that overwrote all others with the "same" instructions and made the browser present those buttons green instead of white after being clicked on in mobile mode: .pre-header .container .row .btn a:hover { color: #205c1b !important; } So I just overwrote it again for mobile only (just beneath the previous code) with: @media(max-width: 600px) { .pre-header .container .row .btn a:hover { color: #fff !important; } } NOTE: You shouldn't do things this way! But it does work, if you're being time pressured. end EDIT begin ORIGINAL POST by S3C on 2019-03-22 I was looking for a solution to this very same problem. In my case I have a navigation made with bootstrap classes. All direct links are divs and all parents of dropdown menus are buttons with exact same styling. When mouse is available, you would want hover to change text color, so user knows it's a clickable link. On touchscreens though you don't want that color change, since as you have figured out it won't go away after click. Do not despair, there IS a solution. Jacque Goupil's answer gives us a clue. He stated that Most mobile browsers will apply hover on the element that was touched last Presumably they do so by reading hover as focus. Therefore solution is simple! HTML <!-- Non-minimum markup to show how it can be used -->

LINK 1 (non)LINK 2

LINK 2.1

LINK 2.2

NOTE: Bootstrap classes btn and btn-default are used here. These are NOT necessary. Also show_or_hide_by_id() is my JS function that changes display property's value to none, if the value is currently block, otherwise it changes it to block. CSS div, button { color: #666; } a { color: inherit; } a:hover, button:hover { // first :hover color: #66f; } button:focus { // second :focus color: inherit; } #dropdown-2 { display: none; } NOTE: All other CSS selectors' order does not matter, but it is important to have button: focus AFTER button: hover. end ORIGINAL POST