HIỆU ỨNG RÊ CHUỘT TRONG CSS

      24

CSS là ngôn ngữ trang trí với nhiều hiệu ứng hay. Bạn sẽ thường gặp nhất là khi di chuyển chuột vào một liên kết (Link) hay vào một khu vực nào đó. Khi rê chuột qua sẽ thấy xuất hiện đổi màu hoặc xuất hiện các hiệu ứng bắt mắt. Bài viết sau sẽ đề cập tới các vấn đề đó.

Bạn đang xem: Hiệu ứng rê chuột trong css


Đổi màu cho link trong CSS

Bất kỳ một blog, website nào cũng có các liên kết nội. Chúng là các đường link dẫn từ bài này sang bài khác. Vậy làm thế nào để cho link đó thay đỏi màu sắc khi con trỏ chuột đi qua?

a:link

Thuộc tính này sẽ thiết lập màu sắc cho văn bản liên kết. Khi viết trong CSS sẽ như thế này:

a:link {

color: #333333;

}

a:hover

Màu chữ sẽ được thay đổi hoặc xuất hiện hiệu ứng nào đó.

a:hover {

color: red;

text-decoration: under-line;

}

Text-decoration: under-line là link xuất hiện gạch chân. Nếu không muốn hãy thay under-line thành none

a:visited

Màu chỉ định cho các liên kết bạn đã xem.

a:visited {

color: #000000;

}

a:active

Màu sắc cho liên kết khi nhấp chuột

a:active {

color: #666666;

}

Thay đổi màu nền khi di chuột lên

Khi rê chuột lên một phần tử nào đó màu nền sẽ bị chuyển sang màu khác.

Hiệu ứng Hover với button

Kết luận: Trên đây là một vài hiệu ứng thường sử dụng. Thuộc tính hover sẽ tạo ra sự thay đổi khi con trỏ chuột di chuyển qua. Khi bạn hiểu rõ cách sử dụng sẽ sáng tạo ra nhiều thứ theo ý của mình.

Xem thêm: Chuyển File Word Sang File Ảnh, Cách Chuyển Đổi Word Sang File Ảnh


Cùng chủ đề

Bình luận! Cancel reply

Xin lưu ý rằng tất cả các bình luận đều được kiểm duyệt theo chính sách bảo mật và tất cả các liên kết đều là nofollow. KHÔNG sử dụng từ khóa trong trường tên. Hãy để lại một cuộc trò chuyện cá nhân và ý nghĩa. *

Comment

Name *

Email *

Website


Đọc thêm


*

Thuộc tính Display Flex trong Css

Display flex trong css là một kiểu dàn trang được Web Developer yêu thích sử dụng bởi tính linh hoạt của nó. Bạn không cần phải thiết lập kích thước cho các phần tử mà…


*

Thuộc tính Position trong CSS sử dụng như thế nào?

Chắc hẳn khi học CSS một trong những thuộc tính khiến người học khó hiểu nhất đó là Position. Bài viết này sẽ giúp bạn hiểu hơn về các thuộc tính Position trong CSS và…



HTML5 là gì? Tại sao nên sử dụng HTML5 thay HTML?

Cách mạng công nghệ đang có những bước tiến mạnh mẽ. Trong đó thiết kế website cũng không ngoại lệ. Nhìn vào ngôn ngữ HTML nó đã được phát triển như thế nào. Trải qua…


*

Canh giữa theo chiều dọc CSS

Khi làm web bạn sẽ cần canh giữa các phần tử theo chiều ngang hoặc dọc (Vertical Centering). Với chiều ngang thì có thể dùng Flexbox với juscontent: center hoặc margin: 0 auto hay text-align:…


*

Thuộc tính Text-Transform trong CSS

Text-Transform là một thuộc tính cũng thường được sử dụng với chữ. Nó dùng để hiển thị chữ thường thành chữ hoa trên trình duyệt. Mời bạn cùng thietkewebhcm.com.vn tìm hiểu về thuộc tính text-transform trong…


CSS là gì? Hướng dẫn cách học CSS hiệu quả

Khi nói về lập trình web không thể không nhắc đến HTML và CSS. Đây là 2 ngôn ngữ căn bản dành cho những người mới bắt đầu làm quen về thiết kế website. Bạn…


Giới thiệu


Xin chào mọi người mình tên là Quách Quỳnh. Mình bắt đầu thietkewebhcm.com.vn để chia sẻ kiến thức về WordPress, làm website và các vấn đề liên quan.

Đó là những kinh nghiệm tích lũy được trong quá trình tìm hiểu vì vậy mình sẽ rất vui nếu những thứ chia sẻ có thể giúp ích được cho bạn.

Các bài viết trong blog mình đều hướng tới những người mới bắt đầu. Vì vậy tiêu chí của mình đó là đơn giản, dễ hiểu nhất có thể.


Nên dùng


Đăng ký nhận tin


Đăng ký nhận các hướng dẫn hay từ Quách Quỳnh nhé!

Gửi cho mình!

Bình luận mới


thiết kế website tại thanh hóa Giới thiệu Liên hệ