Tổng quan về Thêm hiệu ứng hover khác class với Elementor
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. Tham khảo: Omnichannel và Multichannel – Làm thế nào để phân biệt hai khái niệm này.
/*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! Xem thêm tại dịch vụ SEO TaigaWeb.
Bài viết được chia sẻ bởi TaigaWeb – Đơn vị thiết kế website WordPress chuyên nghiệp. Nếu bạn cần hỗ trợ xây dựng website, hãy liên hệ với chúng tôi để được tư vấn chi tiết. Xem thêm tại thiết kế web TaigaWeb.
