hover css - itviec blog

Trong lĩnh vực thiết kế web, hover CSS là một công cụ hữu ích giúp nâng cao trải nghiệm người dùng. Trong bài viết này, ITviec sẽ đưa ra các ví dụ về cách sử dụng CSS effect và hover CSS animation, giúp bạn khai thác tối đa các tính năng hữu ích của thuộc tính này.

Đọc bài viết để hiểu rõ hơn:

  • Hover CSS là gì?
  • Các tính năng của hover CSS trên trang web
  • 3 bước cơ bản để tạo hover CSS
  • Các ví dụ cụ thể cách sử dụng hover CSS

Hover CSS là gì? 

Hover là một thuộc tính trong CSS dùng để thay đổi kiểu dáng của một phần tử khi người dùng di chuột (hover) qua các phần tử trên trang web. Mục đích sử dụng hover CSS thường là để tạo hiệu ứng tương tác hoặc thu hút sự chú ý của người dùng đến phần tử đó.

Hover CSS bao gồm 2 dạng: 

  • Dạng hiệu ứng (Hover CSS effect): Điều chỉnh các hiệu ứng hình thái hoặc trực quan như thay đổi màu sắc, hiển thị, nhấp nháy để làm cho giao diện trở nên sống động hơn.
  • Dạng hoạt ảnh (Hover CSS animation): Là một dạng hiệu ứng phức tạp hơn, sử dụng thuộc tính animation để tạo ra các chuyển động như xoay, di chuyển.

Các tính năng của hover CSS trên trang web

Bạn có thể cải thiện tính tương tác và hiệu ứng hình ảnh của trang web bằng cách sử dụng hover CSS. Dưới đây là một số tính năng hover CSS quan trọng:

  • Tạo hiệu ứng tương tác: Khi người dùng tương tác với nội dung, bạn có thể dùng bộ chọn :hover để tạo hiệu ứng tương tác bằng cách thay đổi giao diện của các thành phần như: thay đổi màu nền, màu văn bản, độ mờ (blur), bóng đổ (box shadow), chuyển đổi (transition), hoạt ảnh (animation),…  
  • Cải thiện trải nghiệm người dùng: Bằng cách thêm các hiệu ứng hover, bạn có thể cải thiện trải nghiệm người dùng (UX) bằng cách cung cấp phản hồi ngay lập tức khi họ tương tác với các phần tử trên trang. Các hiệu ứng như đổi màu, phóng to, hoặc chuyển đổi hình ảnh giúp người dùng hiểu rõ hơn về các chức năng của trang web và tăng tính tương tác.
  • Chọn nhiều thành phần: Bạn có thể chọn nhiều thành phần trên trang bằng bộ chọn :hover. Điều này cho phép bạn thiết kế hiệu ứng hover thống nhất cho các thành phần khác nhau, bao gồm nút, liên kết, hình ảnh, menu điều hướng và bất kỳ thành phần nào khác.
  • Hỗ trợ transition và animation: Bộ chọn :hover có thể được sử dụng với transition và animation CSS để tạo ra các hiệu ứng bắt mắt, thẩm mỹ. Bạn có thể chỉ định thời gian, hàm thời gian và các cài đặt liên quan để điều chỉnh cách các thành phần thay đổi khi hover.
  • Kết hợp với các bộ chọn khác: Bộ chọn :hover có thể được sử dụng với các bộ chọn CSS khác để tập trung vào các thành phần cụ thể hoặc áp dụng kiểu theo các tiêu chí được xác định trước. Ví dụ, bạn có thể tạo các hover CSS effect độc đáo và tùy chỉnh bằng cách kết hợp bộ chọn :hover với bộ chọn lớp, bộ chọn ID hoặc các pseudo-element.
  • Trợ năng: Trợ năng cần được xem xét khi phát triển các hover CSS effect. Người dùng các công nghệ hỗ trợ sử dụng con trỏ, như trình đọc màn hình, có thể không truy cập được hover CSS effect. Do đó, bạn nên kiểm tra xem chức năng chính hoặc nội dung vẫn có thể đọc và sử dụng được ngay cả khi không có hover CSS effect.

Hướng dẫn 3 bước tạo hiệu ứng hover CSS

Chúng ta sẽ phân tích các bước để thiết lập hiệu ứng hover CSS trên một phần tử cụ thể.

Ví dụ bên dưới tạo ra 2 phần tử là một khung chứa màu xám (stage) và quả bóng màu xanh lá (ball):

HTML

<div class="stage">

  <figure class="ball"></figure>

</div>

 

CSS

.stage {

  background: #eaeaed;

  border-radius: 6px;

  height: 150px;

  position: relative;

  min-width: 538px;

}

.ball {

  background: #2db34a;

  border-radius: 50%;

  height: 50px;

  position: absolute;

  width: 50px;

}

Hình kết quả:

Chúng ta sẽ tạo hiệu ứng cho thẻ div bên trong nó với các bước sau:

Bước 1: Thiết lập thuộc tính animation cho phần tử

Chúng ta sẽ bắt đầu thiết lập thuộc tính animation hoặc các thuộc tính con của nó cho một phần tử. Ví dụ khai báo thuộc tính animation cho phần tử “ball”:

CSS

.stage:hover .ball {

  animation:;

}

Bước 2: Xác định các thuộc tính con của animation CSS

Thuộc tính animation bao gồm các thuộc tính con sau đây:  

  • animation-name: Tên của keyframes; 
  • animation-duration: Độ dài của mỗi chu kỳ chuyển động;
  • animation-timing-function: Đường cong tốc độ của chuyển động;
  • animation-delay: Thời gian chờ trước khi bắt đầu chuyển động; 
  • animation-iteration-count: Số lần lặp lại của chuyển động;
  • animation-direction: Hướng bắt đầu của chu kỳ chuyển động;
  • animation-fill-mode: Giá trị áp dụng khi chuyển động không chạy;
  • animation-play-state: Trạng thái của chuyển động.

Tìm hiểu chi tiết cách sử dụng các thuộc tính phụ của animation CSS tại đây [gắn link bài animation CSS].

Quay trở lại ví dụ ở trên, bạn có thể đặt animation-name thành “slide”, animation-duration thành “2s” và animation-timing-function thành “linear”. Điều này định nghĩa: Hiệu ứng khi di chuột (hover) qua khung chứa (stage) sẽ là quả bóng (ball) di chuyển ngang (slide) trong 2 giây với tốc độ đều (linear).

CSS

.stage:hover .ball {

  animation: slide 2s linear;

}

Bước 3: Sử dụng keyframes để xác định chuỗi hover CSS animation

Việc xác định animation và các thuộc tính con của nó chỉ giúp định nghĩa các chi tiết liên quan đến cách chuỗi hoạt ảnh sẽ diễn tiến. Để thực sự bắt đầu chuỗi hoạt ảnh và làm cho phần tử di chuyển, bạn cần đặt quy tắc @keyframes.

Quy tắc @keyframes giúp thiết lập ít nhất hai khung hình chính mô tả cách hoạt ảnh sẽ xuất hiện tại các thời điểm cụ thể trong chuỗi.

Để chỉ ra các điểm ngắt (breakpoints) khác nhau, bạn sử dụng tỷ lệ phần trăm. Trong đó, 0% là thời điểm đầu tiên của chuỗi và 100% là thời điểm cuối cùng. Bạn cũng có thể xác định hai điểm bằng từ khóa “from” và “to”.

Quay lại ví dụ trên, các thuộc tính được hoạt ảnh (chẳng hạn như vị trí trái – left và vị trí trên cùng – top) sẽ được liệt kê bên trong các mốc thời gian của hoạt ảnh (keyframes) như sau:

CSS

@keyframes slide {

  0% {

    left: 0;

    top: 0;

  }

  50% {

    left: 244px;

    top: 100px;

  }

  100% {

    left: 488px;

    top: 0;

  }

}

.stage {

  background: #eaeaed;

  border-radius: 6px;

  height: 150px;

  position: relative;

  min-width: 538px;

}

.stage:hover .ball {

  animation: slide 2s linear;

}

.ball {

  background: #2db34a;

  border-radius: 50%;

  height: 50px;

  position: absolute;

  width: 50px;

}

Kết quả: Khi bạn di chuột qua khung chứa màu xám (stage), hình tròn màu xanh lá cây (ball) sẽ di chuyển từ trái sang phải trong 2 giây theo đường thẳng với tốc độ đều.

Xem toàn bộ code và kết quả tại đây: https://codepen.io/shayhowe/pen/YzpxMJ

Lưu ý:

  • Bạn chỉ có thể hoạt ảnh được từng thuộc tính riêng lẻ. Ví dụ: Để di chuyển phần tử từ trên xuống, bạn không thể thay đổi từ top: 0 thành bottom: 0. Thay vào đó, bạn chỉ cần hoạt ảnh cho thuộc tính top từ top: 0 thành top: 100%.
  • Để đảm bảo tương thích với các trình duyệt khác nhau, quy tắc @keyframes phải được thêm tiền tố của nhà cung cấp, ví dụ: @-moz-keyframes, @-o-keyframes, @-webkit-keyframes,…

Các ví dụ sử dụng hover CSS trong thiết kế web

Sau khi tìm hiểu các bước tạo hover CSS, chúng ta hãy cùng tham khảo qua những ví dụ để hiểu sâu hơn về cách ứng dụng thuộc tính này trong thiết kế web:

Thiết lập hover CSS cho nút

Bạn có thể sử dụng hover CSS để thiết lập hiệu ứng cho nút (button) khi di chuột qua chúng. Có rất nhiều hiệu ứng hover cho nút khác nhau nhằm tăng tính tương tác cho người dùng.

Xem ví dụ: Thiết lập hover CSS cho nút

Thiết lập hover CSS cho hình ảnh 

Việc thiết lập hiệu ứng khi di chuột qua hình ảnh không chỉ giúp hình ảnh thêm ấn tượng mà còn khiến trang web trực quan hơn. 

Xem ví dụ: Thiết lập hover CSS cho hình ảnh

Thiết lập hover CSS cho thanh menu

Thanh menu khô khan sẽ trở nên hấp dẫn hơn bằng những hiệu ứng hover CSS, giúp tăng sự thu hút cho trang web của bạn. Hãy thử tham khảo các hiệu ứng sau đây nhé. 

Xem ví dụ: Thiết lập hover CSS cho thanh menu

Thiết lập hover effect cho icon

Người dùng sẽ thấy hiệu ứng chuyển động thú vị khi di chuột qua các icon (biểu tượng) liên kết với các kênh mạng xã hội. Điều này, sẽ thúc đẩy họ chia sẻ trang web của bạn với người khác. 

Xem ví dụ: Thiết lập hover CSS cho icon

Thiết lập hiệu ứng lật ngược (Flip animation)

Hiệu ứng này sử dụng hai mặt trước và sau của thẻ để chia sẻ thông tin bổ sung. Áp dụng hiệu ứng này khi bạn muốn giới thiệu một người hoặc định nghĩa một khái niệm nào đó. Ví dụ khi muốn giới thiệu về nhân viên của mình, mặt trước có thể là hình ảnh và mặt sau là các thông tin khác về nhân viên đó. 

Xem ví dụ: Thiết lập hiệu ứng hover CSS lật ngược

Thiết lập hiệu ứng xoay (Rotate animation)

Xoay hình ảnh khi hover tạo ra một hiệu ứng đặc biệt gây hứng thú và mang lại trải nghiệm vui vẻ cho người dùng khi tham gia. 

Xem ví dụ: Thiết lập hiệu ứng hover CSS xoay

Thiết lập tạm dừng khi hover (Pause on hover)

Khi người dùng di chuột qua một phần tử, bạn có thể thiết lập thuộc tính hover CSS để tạm dừng hiệu ứng của phần tử. Đây là cách làm tuyệt vời nếu bạn muốn thu hút người dùng vào một yếu tố cụ thể trên trang web.

Xem ví dụ: Thiết lập hiệu ứng hover CSS tạm dừng

Gợi ý các hiệu ứng hover CSS khác

Ngoài những ví dụ về hover CSS kể trên, bạn có thể sáng tạo thêm nhiều hiệu ứng khác với hover để làm nổi bật các thành phần trang web của mình. Chẳng hạn kết hợp các chuyển động phức tạp hơn, thay đổi kích thước, màu sắc hoặc các hiệu ứng đồ họa độc đáo như chuyển đổi hình ảnh, làm mờ nền, hiển thị các phần tử mới khi di chuột qua. Bạn cũng có thể thử nghiệm với các kỹ thuật như gradient chuyển màu, hiệu ứng đổ bóng (box shadow) và chuyển động ba chiều để tạo ra những trải nghiệm tương tác phong phú và sáng tạo hơn.

Những hiệu ứng này không chỉ giúp trang web trở nên sinh động và hấp dẫn hơn mà còn cải thiện trải nghiệm người dùng bằng cách tạo ra các phản hồi trực quan mượt mà và thú vị. 

Các câu hỏi thường gặp về hover CSS

Tại sao hiệu ứng hover không hiển thị?

Một vài nguyên nhân khiến hiệu ứng hover không hiển thị như: 

  • Không đúng cú pháp thuộc tính CSS hoặc sai cú pháp các selector
  • Các lỗi chính tả
  • Có nhiều quy tắc CSS áp dụng cho cùng một phần tử, gây ra xung đột giữa chúng, dẫn đến hiệu ứng hover không được áp dụng đúng. 

Để xử lý, hãy kiểm tra cấu trúc HTML và CSS nhằm tìm các lỗi chính tả hoặc lỗi xung đột.

Có thể sử dụng hiệu ứng hover trên thiết bị di động không?

Hiệu ứng hover thường không hoạt động trên các thiết bị di động vì chúng không có con trỏ chuột. Tuy nhiên, một số trình duyệt di động có thể giả lập hover khi người dùng nhấn và giữ một phần tử.

Làm thế nào để tạo hiệu ứng hover mượt mà?

Để tạo hiệu ứng hover mượt mà, bạn nên sử dụng thuộc tính transition trong CSS để tạo ra sự thay đổi dần dần. Ví dụ:

.button {

  background-color: #3498db;

  transition: background-color 0.3s ease;

}

.button:hover {

  background-color: #2980b9;

}

Tôi có thể sử dụng nhiều hiệu ứng hover trên cùng một phần tử không?

Có, bạn có thể kết hợp nhiều hiệu ứng hover trên cùng một phần tử bằng cách thêm nhiều thuộc tính CSS trong khối :hover. Ví dụ:

.button {

  background-color: #3498db;

  color: white;

  transition: background-color 0.3s ease, color 0.3s ease;

}

.button:hover {

  background-color: #2980b9;

  color: #ecf0f1;

}

Các hiệu ứng hover có ảnh hưởng đến hiệu suất trang web không?

Hiệu ứng hover đơn giản thường không ảnh hưởng nhiều đến hiệu suất trang web. Tuy nhiên, các hiệu ứng phức tạp và việc sử dụng nhiều hiệu ứng có thể làm giảm hiệu suất, đặc biệt trên các thiết bị cũ hơn. Hãy đảm bảo kiểm tra và tối ưu hóa hiệu suất trang web khi cần thiết.

Làm thế nào để dừng animation trên hover CSS?

Một cách đơn giản để dừng animation trên hover CSS đó là dùng thuộc tính animation-play-state. Đầu tiên, bạn định nghĩa trong CSS một animation bằng @keyframes . Sau đó, sử dụng thuộc tính animation-play-state trong CSS và thiết lập giá trị của nó là paused. Sau khi áp dụng thuộc tính này cho phần tử, animation sẽ tạm dừng lại tại vị trí hiện tại của nó cho đến khi ngừng hover.

Tổng kết

Các hiệu ứng hover CSS là cách tuyệt vời để cải thiện tính tương tác trên trang web của bạn. Chúng không chỉ làm cho trang web của bạn hấp dẫn hơn, mà còn có thể cung cấp thông tin quan trọng cho khách truy cập và khuyến khích họ thực hiện hành động trên trang. Hãy cùng thực hành tạo hover CSS để làm hấp dẫn hơn trang web của bạn nhé.

Tham khảo các bài viết thuộc chủ đề CSS trên ITviec: