twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

ai fix: sticky hover on mobile still

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-26 16:47:35 -04:00
parent b050c5d706
commit 67290994a0
1 changed files with 9 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/css/style.css
View File

@@ -186,17 +186,20 @@ article li {
cursor: pointer;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.like-icon:hover, .like-icon:active {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked {
cursor: pointer;
color: #e2264d;
}
.like-icon.liked:hover, .like-icon.liked:active {
/* Apply hover effects only on devices that can hover to avoid sticky hover on mobile */
@media (hover: hover) {
.like-icon:hover {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked:hover {
transform: scale(1.15);
}
}
.hint-animation {
animation: wobble 1s ease-in-out 2;
}
@@ -208,20 +211,3 @@ article li {
60% { transform: translateX(1px) rotate(3deg) scale(1.2); }
75% { transform: translateX(0) rotate(-1deg) scale(1.1); }
}
@media (hover: hover) {
.like-icon {
cursor: pointer;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
}
.like-icon:hover {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked {
cursor: pointer;
color: #e2264d;
}
.like-icon.liked:hover {
transform: scale(1.15);
}
}