Hi anh em, nay mình chơi “ngu” lấy Elementor thiết kế luôn thay vì Figma như mọi khi. Kết quả là ăn hành quả này Hover này. Khách hàng muốn hover vào vùng sản phẩm và nút Add to card phải xuất hiện luôn chứ không phải là đúng vị trí nút. Mình ngồi search search 1 hồi thì được giải pháp như sau, nên lưu lại đây cho anh em nào cần.
/*Content Show/Hide on Hover by BunnyWP*/
.add-to-card{
opacity: 0;
transition: 0.5s ease-in-out; }
.main-atc:hover .add-to-card{
opacity: 1;
}
Giải thích 1 chút về cách sử dụng đoạn code trong Elementor (theo trường hợp sử dụng của mình): Bước 1: Mình thêm button vào vị trí mong muốn gắn cho em nó class add-to-card
Bước 2: Quay trở ra vùng chứa muốn ảnh hướng đến button đó và thêm class
main-atc
Thế là xong bây giờ khi hover vào vùng bất kỳ có chứa class
.main-atc
thì class .add-to-card
sẽ bị ảnh hưởng. Done nhé, chúc anh em thành công!