sticky effects on touchscreens when hovered or focused upon

Question

sticky effects on touchscreens when hovered or focused upon

Is there a solution to the issue described in the following quote?

Bootstrap: link

:hover functionality is not supported on most touch devices, but iOS tries to replicate it by creating persistent hover styles that remain after tapping an element. These styles are only removed when users tap elsewhere.

Here is the code snippet provided:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid p-3">
  <button class="btn btn-outline-primary">Click here</button>
</div>

On an iPad, when the button is tapped, the :active state remains sticky and does not change. Is there a CSS solution to this problem?

jquery html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

Learn how to make elements active using CSS Feel free to ask any questions :)

.active:active {
  color: red;
}
.active:hover {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

<div class="container-fluid p-3">
<button class='btn btn-outline-primary active'>Active</button>
<button class='focus'>Focus</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



  <button class="btn btn-outline-primary">Click here</button>
</div>

Answer 2

Learn how to make elements active using CSS Feel free to ask any questions :)

.active:active {
  color: red;
}
.active:hover {
  color: red;
}
.focus:focus {
  color: red;
}
:target {
  color: red;
}

<div class="container-fluid p-3">
<button class='btn btn-outline-primary active'>Active</button>
<button class='focus'>Focus</button>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>



  <button class="btn btn-outline-primary">Click here</button>
</div>

sticky effects on touchscreens when hovered or focused upon

Answer №1

Similar questions

Steps for registering a function on $rootScope when angularjs is ready

The elements within the side navigation menu are not displaying correctly within the app component's HTML file

Deleting an added element upon closing the dialog box

Incorporating a classList.toggle into a snippet of code

Using AJAX in a knockoutjs Form Demonstration

Ways to eliminate HTML tags from the output while preserving the formatting

What is the process for using AJAX and PHP to upload an image file?

Using R Markdown and Hugo to Style Blog Titles

What is the best way to incorporate a custom modal created with HTML/CSS into my Bootstrap website?

Problem with displaying JSF Bootstrap Glyphicons

SweetAlert.js does not function properly within a custom AngularJS directive

Get the value of the button that has been clicked

Experiencing problems with web page layout when using bootstrap on IE8?

polygon with five or more sides

Retrieving an auto-generated number on the account dashboard (login portal)

Creating a fieldset and form in HTML code involves using

Creating a shortcode that displays a single user avatar in WordPress using a custom function plugin

Having trouble sending a file with a form using JQuery AJAX?

Use jQuery to dynamically alter color based on conditional statements

Creating an interactive time selection tool with two dropdown lists that are dependent on each other using HTML and JavaScript