Hover css: Xử lý thay đổi css khi di chuột vào một phần tử html

Nếu bạn muốn thay đổi style css khi người dùng di con trỏ chuột vào một đối tượng nào đó thì hôm nay tôi sẽ chỉ cho bạn một công cụ rất đắc lực chính là hover css.

Hover selector Css

:hover{
  Style Css khi hover
}

Đây chính là quy tắc của hover selector . Để giúp bạn nắm rõ hơn bây giờ chúng ta đến với ví dụ.

Ví dụ Hover Css

Ví dụ 1: Thay đổi màu của tiêu đề khi hover

<style>
    h1{
        color: red;
    }
    h1:hover{
        color: orange;
    }
</style>
<h1>Học lập trình web đi làm Unitop.vn</h1>

Kết quả ban đầu text có màu đỏ, khi hover chuột vào nó đổi sang màu cam.

Bạn copy vào máy tính chạy để trải nghiệm kết quả nhé.

Ví dụ 2: Hiển thị menu con khi hover chuột vào menu cha.

Giả sử trong website chúng ta có menu đa cấp. Ban đầu chỉ hiển thị cấp một và sau khi di chuột vào menu cha thì menu được hiển thị. Tôi tin rằng bạn đã từng thấy nó nhiều lần khi lướt web.

Vậy chúng ta làm nó thế nào?

Bên dưới chính là code demo cho chức năng trên

<style>
    ul#main-menu .sub-menu{
        display: none;
    }
    ul#main-menu li:hover .sub-menu{
        display: block;
    }
</style>
<ul id="main-menu">
    <li><a href="#">Trang chủ</a></li>
    <li><a href="#">Về Unitop</a></li>
    <li><a href="#">Khóa học</a>
        <ul class="sub-menu">
            <li><a href="#">Html Css 21 Ngày</a></li>
            <li><a href="#">Php Master</a></li>
            <li><a href="#">Bootstrap AZ</a></li>
        </ul>
    </li>
    <li><a href="#">Liên hệ</a></li>
</ul>

Qua ví vụ này bạn thấy khi sử dụng hover không những tác động trực tiếp vào phần tử đó mà có thể tác động làm thay đổi các phần tử con của nó.

Kết luận

Qua bài viết nay tôi đã hướng dẫn bạn cách sử dụng selector hover trong css. Đây là một phần rất thường xuyên sử dụng trong website nhằm giúp người dùng nhận ra những dấu hiệu để họ biết mình đang tương tác với các phần trên website.

Ngay bây giờ bạn nên dành thời gian để code lại những ví dụ trên để hiểu sâu hơn những gì tôi đã chia sẻ.

*** Đây là một phần rất nhỏ trong hành trình hoàn thiện kỹ năng xây dựng giao diện html css từ bản thiết kế và kiếm tiền từ kỹ năng lập trình web. Nếu bạn muốn được học bài bản hãy bắt đầu ngay với Html Css 21 Ngày với 195 bài học chuyên sâu và được kèm cặp hỗ trợ qua nhóm kín.

Xin chào, sớm hẹn gặp lại!