{"id":82,"date":"2016-04-12T20:11:35","date_gmt":"2016-04-12T20:11:35","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?p=82"},"modified":"2017-05-02T16:45:31","modified_gmt":"2017-05-02T16:45:31","slug":"hyperlinks-hover-state-back-button-mobile","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/","title":{"rendered":"Links remain in :hover state after clicking browser Back button on mobile devices"},"content":{"rendered":"<h2>HTML anchor remains in hover state after clicking Back button mobile<\/h2>\r\n<p>When using Mobile Safari (iOS) on iPads and iPhones or Chrome Mobile on Android devices, when you touch a button or hyperlink, it will trigger the &#8220;hover&#8221; state. If you have a CSS declaration that targets this pseudo class, this style may be active or visible if you tap the button\/hyperlink and then tap the Back button in the browser. This is most likely not the desired state that you are looking for especially if your :hover declaration was intended for desktop browsers only. The reason why this happens is because when you tap on the back button, a request to the server is not sent, therefore the page that is in the cache gets reloaded along with the unintended hover state applied to your button or hyperlink.<\/p>\r\n\r\n<p>Below is the sample HTML and CSS:<\/p>\r\n<h4>HTML<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;a href=&quot;#&quot; id=&quot;button&quot;&gt;Button 1&lt;\/a&gt;\r\n<\/div>\r\n<\/pre>\r\n<h4>CSS<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\na {\r\n   display: inline-block;\r\n   width: 200px;\r\n   font-size: 1em;\r\n   font-weight: bold;\r\n   border-radius: 5px;\r\n   text-align: center;\r\n   margin-bottom: 25px;\r\n   line-height: 2em;\r\n   text-decoration: none;\r\n}\r\n\r\na:link,\r\na:no-touch:hover {\r\n   background-color: green;\r\n   color: white;\r\n}\r\n\r\na:hover {\r\n   background-color: white;\r\n   color: green;\r\n   border: 1px solid green;\r\n}\r\n<\/div>\r\n<\/pre>\r\n\r\n<p>Here are our buttons in the linked and hover states, respectively.<\/p>\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/buttons_post5.png\" alt=\"buttons_post5\" width=\"225\" height=\"111\" class=\"alignnone size-full wp-image-83\" \/>\r\n<p>When tapping on the Back button on a mobile browser, the button with white background with green font would be active and not the button with green background and white font.<\/p>\r\n\r\n<h2>Solution<\/h2>\r\n<p>To fix this you can set up a script to detect the device using the ID of the button and the userAgent.match function, by passing Android, iPhone, or iPad arguments as seen below.<\/p>\r\n<h4>JavaScript<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\n&lt;script&gt;\r\n   var userAgent = window.navigator.userAgent;\r\n\r\n   if (userAgent.match(\/iPad\/i) || userAgent.match(\/iPhone\/i) || userAgent(\/Android\/i)) {\r\n      var button1 = document.getElementByID(&quot;button&quot;);\r\n\r\n      button1.className += &quot; no-touch&quot;;\r\n   }    \r\n&lt;\/script&gt;\r\n<\/div>\r\n<\/pre>\r\n<p>This script adds a &#8220;no-touch&#8221; class to the <b>className<\/b> property of the anchor tag, which will then render as if the button is in it&#8217;s &#8220;linked&#8221; state. For more information on how to check User Agents for Mobile\/Tablet, visit this post on stackoverflow, <a href=\"http:\/\/stackoverflow.com\/questions\/21757105\/javascript-how-to-check-user-agent-for-mobile-tablet\" target=\"_blank\">JavaScript how to check User Agent for Mobile\/Tablet<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"HTML anchor remains in hover state after clicking Back button mobile When using Mobile Safari (iOS) on iPads and iPhones or Chrome Mobile on Android devices, when you touch a button or hyperlink, it will trigger the &#8220;hover&#8221; state. If you have a CSS declaration that targets this pseudo class, this style may be active [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[11,4,9,6,10,7,8],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Hyperlink remains in hover state after clicking Back button mobile<\/title>\n<meta name=\"description\" content=\"Learn how to disable the hover state of a button or hyperlink on mobile phones after tapping on the Back button in Mobile Safari or Chrome Mobile.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hyperlink remains in hover state after clicking Back button mobile\" \/>\n<meta property=\"og:description\" content=\"Learn how to disable the hover state of a button or hyperlink on mobile phones after tapping on the Back button in Mobile Safari or Chrome Mobile.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-12T20:11:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-02T16:45:31+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/buttons_post5.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"2 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/buttons_post5.png\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/04\/buttons_post5.png\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/\",\"name\":\"Hyperlink remains in hover state after clicking Back button mobile\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/#primaryimage\"},\"datePublished\":\"2016-04-12T20:11:35+00:00\",\"dateModified\":\"2017-05-02T16:45:31+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Learn how to disable the hover state of a button or hyperlink on mobile phones after tapping on the Back button in Mobile Safari or Chrome Mobile.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/hyperlinks-hover-state-back-button-mobile\/\",\"name\":\"Links remain in :hover state after clicking browser Back button on mobile devices\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-1k","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/82"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":6,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"predecessor-version":[{"id":216,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/82\/revisions\/216"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}