Cách viết css hover cho phần tử khi rê chuột vào

Xin chào tất cả các bạn đã quay trở lại với Sơn Blogger!
Nếu như các bạn có qua một số blog hay sử dụng hover như blog Code Đây Rồi của anh Trần Thanh Bình thì có lẽ các bạn đã biết, anh Bình rất thường xuyên sử dụng hover cho blog mình để tặng độ sống động và chuyên nghiệp cho blog.

Demo

Vậy thì làm thế nào để viết được css hover giống như vậy? Mình sẽ hướng dẫn các bạn ở trong bài viết ngày hôm nay.

BƯỚC 1: VIẾT CSS TÙY CHỈNH BAN ĐẦU.

Ví dụ mình có một cặp thẻ <div>...</div> có class là "box":

<div class="box"></div> 

Tiếp theo chúng ta sẽ biết css tùy chỉnh ban đầu như sau:

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

Và cuối cùng chúng ta sẽ viết css hover như sau:

.box:hover {
  background: green;
}

 Khi ta sử dụng ":hover" nghĩa là ta chọn các liên kết sẽ được di chuyển. Nếu ta sử dụng một thuộc tính khác định dạng trong vùng được chọn liên kết thì khi rê chuột (hover) thì ta sẽ được định dạng của thuộc tính sử dụng ở vùng chọn được liên kết.
Nếu như sử dụng thêm một số hiệu ứng chuyển động, đơn giản nhất là hiệu ứng transtion thì hiệu ứng hover sẽ trở nên hoàn hảo. Ở bài sau mình sẽ hướng dẫn thêm cho các bạn cách sử dụng hover với hiệu ứng transtion.
Nếu hay hãy để lại một bình luận dưới bài viết để mình có động lực nhé!