اجرا ❯
بازگشت
به
آموزشگاه
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html dir="rtl"> <head> <style> .pagination { display: flex; justify-content: center; list-style: none; padding: 0px; } .pagination li a { display: block; padding: 8px 12px; text-decoration: none; border: 1px solid gray; color: black; margin: 0 4px; border-radius: 5px; transition: background-color 1s; } .pagination li a.active { background-color: #4CAF50; color: white; } .pagination li a:hover:not(.active) { background-color: lightgray; } </style> </head> <body> <h2>صفحه بندی با افکت Transition به هنگام Hover</h2> <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a class="active" href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> </ul> </body> </html>
