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.

/*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!

Discuss