• 회원가입
  • 로그인
  • 구글아이디로 로그인

[pagination] CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)

페이징 - 마우스오버 시 색깔 변경

 

<style>

.hz {

  display: inline-block;

}


.hz a {

  color: black;

  float: left;

  padding: 8px 16px;

  text-decoration: none;

  border-radius:50%;

}


.hz a.active {

  background-color: red;

  color: white;

}


.hz a:hover:not(.active) {background-color: blue;}

</style>


<div class="hz">

  <a href="#">&laquo;</a>

  <a href="#">1</a>

  <a class="active" href="#">2</a>

  <a href="#">3</a>

  <a href="#">4</a>

  <a href="#">5</a>

  <a href="#">&raquo;</a>

</div>


결과보기

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
pagination CSS - 페이징 - 둥근테두리 효과 (Rounded bordered pagination)
pagination CSS - 페이징 - 링크칸 간격 띄우기 (Space Between Links)
pagination CSS - 페이징 - 글자 크기 (Pagination Size)
pagination CSS - 페이징 - 가운데 정렬 (Centered Pagination)
pagination CSS - 페이징 - (이전페이지/다음페이지/지정페이지) 이동 링크 버튼
pagination CSS - 페이징 - 빵메뉴 (= Breadcrumbs : 브레드크럼즈 = 메뉴 현재위치 표시)
목록
찾아주셔서 감사합니다. Since 2012