Thêm hiệu ứng hover khác class với Elementor Pro nhanh

Them hieu ung hover khac class voi Elementor

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.

Thêm hiệu ứng hover khác class với Elementor - Figure 1

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

Thêm hiệu ứng hover khác class với Elementor - Figure 2

Bước 2: Quay trở ra vùng chứa muốn ảnh hướng đến button đó và thêm class main-atc

Thêm hiệu ứng hover khác class với Elementor - Figure 3

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.

Đây là bài mình ghi chép sau khi vọc – không phải hướng dẫn từ chuyên gia, mà là kinh nghiệm xương máu của một người dùng tự mày mò. Nếu bạn muốn một website đàng hoàng ngay từ đầu, team làm WordPress chuyên nghiệp sẽ đỡ mất thời gian hơn – TaigaWeb là một đơn vị mình tin.