Hover – Thủ thuật CSS  – 1

Hover – Thủ thuật CSS – 1

Xin chào các bạn, bắt đầu từ hôm nay mình sẽ share và hướng dẫn những kiểu css hay đẹp, hoặc thông dụng và sẽ giải thích rõ những thuộc tính liên quan. Những ai chưa biết về css thì vui lòng xem serie css cơ bản của mình để hiểu rõ hơn về css và biết mình nên bắt đầu từ đâu.

Hover – định nghĩa và thủ thuật

Đây là tổng hợp những kiến thức về css và các thủ thuật sử dụng css của mình và mình sẽ giải thích theo nghĩa đơn giản nhất cho các bạn hiểu và ứng dụng vào thực tế, còn các bạn muốn chuyên sâu hơn thì hãy nghiên cứu thêm tài liệu tiếng anh để có định nghĩa chính xác nhất có thể. Link tài liệu mình sẽ update sau.

Và bắt đầu với chương đầu tiên, mình xin giới thiệu các bạn : Hover CSS

Hover là gì ?

Hover được coi là hiệu ứng cơ bản, là hiệu ứng khi rê chuột vào sẽ có những thuộc tính mình đã setup sẵn để trang web của mình động nhất có thể với css.

Dưới đây là 1 ví dụ về hover button :

Cách sử dụng hiệu ứng Hover

Để tạo 1 sự kiện hover đơn giản, trước hết chúng ta cần 1 Base Element làm cơ sở, điển hình như việc bạn muốn nhà đẹp thì phải có cái nhà cái đã. Tương tự :

chúng ta tạo 1 thẻ Button cơ bản gán class=”btn” ( các bạn có thể gán class theo project của các bạn để tiện việc quản lý cũng như dễ hiểu ).

<button class="btn"> Try hover me </button>
Mở thẻ <button> thì phải đóng thẻ </button>.

Bây giờ setup cơ bản cho button, để quản lý dễ dàng hơn, chúng ta gọi trực tiếp tới thẻ button với class =”btn” để tránh động chạm code với thể loại khác :

button.btn {
 width: 200px ; /* Chiều dài bằng 200 px, đây là những kiến thức cơ bản, mình sẽ không nhắc lại */
 height: 50px;
 font-size:16px; /* kích cỡ của text nằm trong button */
 background: #fff; /* Nền màu trắng */
 border: 2px solid #333; /* viền button với đường thẳng có kích cỡ là 2px màu đen */
}

đã xong cơ bản của một nút button. các bạn xem có thể reset trang của mình vừa khởi tạo để xem hình dạng của nó. Như chúng ta thấy, hiện tại rê chuột vào vẫn chẳng có gì xảy ra ? Bởi vì chúng ta chưa setup sự kiện hover cho nó. Để setup sự kiện hover cho button cũng như các element khác, chúng ta viết theo cấu trúc

.class:hover {
}

hoặc

#id:hover {
}

cụ thể :

button.btn:hover {
 background: tomato; /* Nền màu  cà chua khi rê chuột vào*/
 border-color: red; /* viền button chuyển thành màu đỏ khi rê chuột vào */
 /* một số thuộc tính khác tùy theo ý thích hoặc yêu cầu từ các bạn  ở đây mình sẽ thêm vào thuộc tính transition để cho nó chuyển động mượt hơn và thuộc tính 
 transition mình sẽ nói thêm ở bài sau. Thuộc tính transition này được đặt trực tiếp tại base element, không đặt ở nơi xảy ra sự kiện, hiệu ứng các bạn nha  */
}

Cuối cùng css tổng thể như sau:

button.btn {
 width: 200px ;
 height: 50px;
 font-size:16px;
 background: #fff;
 border: 2px solid #333;
 transition: all 0.4s ease-in;
}
button.btn:hover {
 background: tomato;
 border-color: red;
}
 
Một số ví dụ về Hover :

Lời kết :

Trên đây là ví dụ về hiệu ứng hover ( hiệu ứng rê chuột hay còn được gọi là sự kiện – sự kiện là theo kiến thức của mình, mong các bạn đừng bắt bẻ =]] ). Các bạn có thể áp dụng hiệu ứng hover này cho tất cả những thứ bạn nghĩ rằng các bạn sẽ rê chuột vào khi nhìn thấy nó trên trang web của mình. Ví dụ như: menu, background, section .v.v. Chủ yếu là phù hợp nhu cầu với các bạn.
Hẹn gặp lại các bạn ở bài sau. Nếu có thắc mắc hãy để lại comment ở bên dưới, mình sẽ giải đáp.