Để tạo hiệu ứng chuyển tiếp khi phân trang khi di chuột, hãy sử dụng thuộc tính chuyển tiếp.
Ví dụ
Bạn có thể thử chạy đoạn mã sau để thêm hiệu ứng chuyển tiếp -
<!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>Our Quizzes</h2>
<div class = "demo">
<a href = "prev.html"><</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">></a>
</div>
</body>
</html>