Viết CSS hover cho phần tử trong website

Xin chào tất cả các bạn đã quay trở lại với Tôi Viết Code
Nếu như các bạn có lướt qua một số blog chia sẻ thì có lẽ các bạn đã biết, họ 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 transition 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 transition.
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é!

css