Tạo hiệu ứng chuyển đổi (transition) khi hover phân trang với CSS

Giới thiệu

Để tạo hiệu ứng chuyển đổi khi hover phân trang, sử dụng thuộc tính transition.

Ví dụ

<!DOCTYPE html>
<html>
<head>
    <style>
        .demo {
            display: inline-block;
        }
        .demo a {
            color: red;
            padding: 5px 12px;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 2s;
        }
        .demo a.active {
            background-color: orange;
            color: white;
            border-radius: 5px;
        }
        .demo a:hover:not(.active) {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h2>Các bài Quiz của chúng tôi</h2>
    <div class="demo">
        <a href="prev.html">&lt;</a>
        <a href="quiz1.html">Quiz1</a>
        <a href="quiz2.html">Quiz2</a>
        <a href="quiz3.html">Quiz3</a>
        <a href="quiz4.html" class="active">Quiz4</a>
        <a href="next.html">&gt;</a>
    </div>
</body>
</html>