Mục lục
Xin chào các bạn, ngày hôm nay mình sẽ bắt đầu một series về những bài tập Html, css, javascript đơn giản. Hi vọng các bạn sẽ thích series này của mình. 😀
Bài đầu tiên thì mình sẽ hướng dẫn các bạn code một bảng màu khi hover như hình minh họa dưới đây
Trông thú vị phải không các bạn. Vậy làm thế nào để code được một bảng hover đầy màu sắc như này. Rất đơn giản và chỉ cần 3 file html, css, javascript rất ngắn gọn thôi.
Html
Đầu tiên thì ta cần phải tạo file index.html Chỉ cần 1 thẻ
và có class với id là container, và việc còn lại là của file css và file js.
Javascript
Tạo một file script.js như đã khai báo trong file html. Và trong file script.js sẽ có đoạn code như dưới đây: Tạo một const để lấy DOM container ở html. Từ thẻ DOM này ta sẽ for để thêm từng thẻ
là từng ô vuông. Add thêm sự kiện hover vào thì sẽ setColor thẻ
đấy và khi hover ra thì sẽ removeColor thẻ