Elementor: hover khác class với bí kíp “Lầy Lội”

Chào anh em, hôm nay mình sẽ chia sẻ một bí kíp thú vị về việc thêm hiệu ứng hover khác class với Elementor – một plugin mạnh mẽ nhưng cũng không kém phần “đánh đố” người dùng.

Câu Chuyện ‘Chơi Ngu’ với Elementor

Chuyện là như vầy, hôm nọ mình bỗng nhiên đổi gió quyết định dùng Elementor để thiết kế thay vì Figma như mọi khi. Và kết quả là… mình “hút” trọn món “đặc sản” mang tên Hover (hiệu ứng di chuyển chuột). Khách hàng yêu cầu khi hover vào vùng sản phẩm thì cái nút “Add to Card” phải hiện ra. Nghe đơn giản, đúng không? Thế mà mình hoay hoay mãi, cuối cùng cũng phải chịu tìm ra giải pháp.

Mà đây, là đoạn code “chí mạng” mình tìm được:

/* Content Show/Hide on Hover by LamEE */
.add-to-card {
    opacity: 0;
    transition: 0.5s ease-in-out;
}
.main-atc:hover .add-to-card {
    opacity: 1;
}

Cùng mình lội qua từng bước chi tiết để áp dụng đoạn code này trong Elementor nhé:

Bước 1: Thêm button ‘Add to Card’

Đầu tiên, anh em thêm cái button ‘Add to Card’ vào đúng vị trí mong muốn, nhớ gắn cho nó cái class add-to-card. Đoạn này, nhớ là phải làm đúng, vì nếu không thì công sức coi như “đổ sông đổ biển”.

Bước 2: Khai báo vùng chứa ‘main-atc’

Quay trở ra vùng chứa mà bạn muốn ảnh hưởng đến button kia và thêm class main-atc. Đây chính là bước tạo nên “phép màu”, khi hover vào bất kỳ vùng nào có class main-atc, cái button với class add-to-card sẽ “cháy sáng” như ý muốn của khách hàng.

Lầy Nhưng Hiệu Quả

Chỉ với vài dòng CSS đơn giản, chúng ta đã có thể biến hóa giao diện một cách hiệu quả. Điều này không chỉ làm hài lòng khách hàng mà còn giảm bớt “đau khổ” cho bản thân mỗi khi phải đối mặt với những yêu cầu tưởng chừng như “hóc búa”.

Có lẽ điều thú vị nhất khi sử dụng Elementor và chút khéo léo với CSS là chúng ta có thể thỏa sức sáng tạo mà không cần phải viết quá nhiều code phức tạp. Chỉ cần hiểu rõ cách hoạt động của các class và cách thay đổi thuộc tính, chắc chắn anh em sẽ làm được những thứ tuyệt vời.

Vậy nên, anh em đừng ngại “chơi ngu” một chút với Elementor. Bởi vì đằng sau mỗi lần “ngu” ấy là một lần chúng ta học được điều gì đó mới mẻ. Và chắc chắn rằng, với cách làm “lầy” của mình thì vấn đề hover của các bạn sẽ trở nên “nhẹ nhàng” ngay.

Chúc anh em thành công và nhớ không để khách hàng làm khó nhé!

P/S: Nếu gặp khó khăn, đừng quên quay lại đây và cùng chia sẻ nỗi đau coder nha! Hãy thử áp dụng đoạn code trên và cảm nhận sự khác biệt. Nếu thấy hữu ích, đừng ngần ngại chia sẻ với đồng nghiệp hoặc “tag” mình vào thành quả của anh em nhé!