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

Chi tiết

Liên quan

Nhận xét

Tác giả

Bản Quyền

Xem toàn trang

Nếu muốn xem bài viết một kích thước lớn hãy click xem toàn trang nhé!

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é!

Chia sẻ lên Facebook

Chia sẻ lên Zalo

Lưu ý:
Sử dụng tiếng Việt có dấu khi bình luận, hạn chế viết tắt.
Bình luận đúng chủ đề bài viết, không SPAM trong bình luận.
Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Up ảnh lên trang imgur.com, sau đó sao chép link ảnh dán vào khung bình luận.
Để chèn hình ảnh, khi đăng nhận xét bạn nhập như sau: [img]https://i.imgur.com/xvhDr24.png[/img]

Trịnh Công Sơn

“Đừng so sánh mình với bất cứ ai trong thế giới này. Nếu bạn làm như vậy có nghĩa bạn đang sỉ nhục chính bản thân mình.”

Tất cả bài đăng trên website đều thuộc bản quyền về Tôi Viết Code, chỉ được phát hành lại nội dung từ website này khi có sự đồng ý bằng văn bản của admin