Disable hover in mobile - css

Question

I have these class, so hen I hover an item it do a transition, the problem is when I´m in mobile view, it exit of browse
.ftContainerOut {
padding-right:10px;
padding-bottom:20px;
transition: all 0.5s ease-in-out;
position: relative;
cursor:pointer;
z-index:1;
}
.ftContainerOut:hover {
transform: scale(1.5);
z-index:10;
}
I'm trying this to disable it on mobile, but it doesn´t work, only in normal view the transition gets stuck
#media screen and (min-width: 600px){
.ftContainerOut:hover {
display: none;
}
}
Help is very appreciated. Regards

Answer 1

First change your media query to max-width and then reset the properties that you want to reset for mobile.
#media screen and (max-width: 600px){
.ftContainerOut:hover {
transform: scale(1);
z-index:1;
}
}
Also if you want to remove transition in mobile you can also add
#media screen and (max-width: 600px){
.ftContainerOut {
transition: none;
}
}

Answer 2

You don't want to use display:none on the :hover, as this will make the div hide on hover, which wont work. Instead I suggest making it do nothing.
On desktop, you transform: scale the item by 1.5, so on mobile transform: scale it by 1, which as it is already 1, it will not change.
Same principle for z-index, on desktop :hover changes it to 10, so on mobile make it "change" to 1, but as it is already 1, again there is no change.
So the CSS would be:
#media screen and (max-width: 600px) {
.ftContainerOut:hover {
transform: scale(1);
z-index: 1;
}
}
Here's a snippet to try it out.
.ftContainerOut {
padding-right: 10px;
padding-bottom: 20px;
transition: all 0.5s ease-in-out;
position: relative;
cursor: pointer;
z-index: 1;
}
.ftContainerOut:hover {
transform: scale(1.5);
z-index: 10;
}
#media screen and (max-width: 600px) {
.ftContainerOut:hover {
transform: scale(1);
z-index: 1;
}
}
<div class="ftContainerOut" style="width: 100px; height: 100px; background: green;"></div>