Question 408374 in Html Question posted in
Some basic documentation can be found here.

Html – My css :hover properties do not get removed on mobile when the element is clicked and remain there. And the :active property also works after a delay

I have a button with a :active class instruction to scale down to produce a nice effect, it works fine on pc, but on my mobile device I found that the hover effect remained there after I pressed the button, which is of course not desired. This is how it becomes after I click the button,

enter image description here

Also with the :acitve pseudo-class, the button becomes smaller in scale when I click it and it works as expected on pc, but on mobile device it just doesn’t work and the active effect only works when I keep on pressing the button for sometime which is not the user would do.

Note: I am using the active pseudo-class to show an effect when the user clicks the button.

Note 2: I am not actually using a <btn> tag instead a <p> tag for the button, I just now tried using the <btn> tag but it doesnt scale up or down while using it.

This is the snippet of the button,

.queueAdd {
    background-color: #008d3fed;
    transition: 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.queueAdd:hover {
    scale: 1.1;
    cursor: pointer;
}

.queueAdd:active {
    scale: 0.7;
    background-color: #00853ced;

}
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha3840evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


<!-- The button -->
<p style="width: fit-content" class="fs-4 px-3 m-3 rounded-2 queueAdd text-center">+</p>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    If anyone ever stumbles by this post and is looking for a solution, I have a work around for the button click effect, in general this can be applied to produce any needed effect not just the one I was looking for,

    This is how I did it:

    created a new function and added that to the onclick of my button/element, passed this in the function's argument which basically just means the element which is actually triggering the function is itself passed inside.

    Made the function add a class to the element, the class is just a animated keyframe which produces my desired effect, and then after some delay remove the class so the button is back to normal.

    You could also have directly styled and chnaged the appearance with javascript, but it just didnt give a smooth transition that i wanted so I went for the class approach

    Note/Tip: You can add multiple functions by seprating each funciton with a ; (semicolon)

    Here is the code:

    HTML

    <div onclick="animateButtonPress(this)" class="m-3" > 
<p style="width: fit-content" class="fs-4 px-3 rounded-2 queueAdd text-center">+</p>
</div>

    CSS

    .queueAdd {
    background-color: #008d3fed;
    transition: 0.2s;
    /* transition-duration: 2s; */
}

.queueAdd:hover {
    scale: 1.1;
    cursor: pointer;
}

//the class that will be added and removed to produce the animated 
.animateButtonPress {
    animation: buttonPress 0.3s ease 0s 1 forwards;
}

//the animation
@keyframes buttonPress {
    0% {
        scale: 1;
    }

    40% {
        scale: 0.7;
    }

    80% {
        scale: 1.05;
    }

    100% {
        scale: 1;
    }
}

    JS

    function animateButtonPress(btn){
    btn.classList.add("animateButtonPress")
    setTimeout(()=>{
        btn.classList.remove("animateButtonPress")
    },400)
}

  2. 0

    I think this is by design, so that on :hover menus would work on mobile as well. Also the delay before :active is to differentiate between regular :hover.

    I think you can work around this using mouse events and some javascript. Maybe using touch events would be more precise.

    This might work:

    var button = document.querySelector(".queueAdd");
button.addEventListener('mouseenter', function(ev) {
  button.classList.add("hover")
})

button.addEventListener('mouseleave', function(ev) {
  button.classList.remove("hover")
})

button.addEventListener('mosuedown', function(ev) {
  button.classList.add("active")
})

button.addEventListener('mouseup', function(ev) {
  button.classList.remove("active")
})
    .queueAdd {
  background-color: #008d3fed;
  transition: 0.2s;
  cursor: pointer;
}

.queueAdd:hover,
.queueAdd.hover {
  transform: scale(1.1);
}

.queueAdd:active,
.queueAdd.active {
  transform: scale(0.7);
  background-color: #00853ced;
}
    <button class="queueAdd">button</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search