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

32
src/css/style.css
View File

@@ -186,16 +186,19 @@ article li {
cursor: pointer; cursor: pointer;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out; 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 { .like-icon.liked {
cursor: pointer; cursor: pointer;
color: #e2264d; 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 */
transform: scale(1.15); @media (hover: hover) {
.like-icon:hover {
color: #fff;
transform: scale(1.15);
}
.like-icon.liked:hover {
transform: scale(1.15);
}
} }
.hint-animation { .hint-animation {
animation: wobble 1s ease-in-out 2; animation: wobble 1s ease-in-out 2;
@@ -207,21 +210,4 @@ article li {
45% { transform: translateX(-1px) rotate(-5deg) scale(1.3); } 45% { transform: translateX(-1px) rotate(-5deg) scale(1.3); }
60% { transform: translateX(1px) rotate(3deg) scale(1.2); } 60% { transform: translateX(1px) rotate(3deg) scale(1.2); }
75% { transform: translateX(0) rotate(-1deg) scale(1.1); } 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);
}
} }