집 > 기사 > 웹 프론트엔드 > CSS:호버 선택기 사용법에 대한 간략한 소개

CSS:호버 선택기 사용법에 대한 간략한 소개

不言원래의: 2018-08-28 11:15:112639검색

이 글은 CSS:hover 선택기의 사용법에 대해 간략하게 소개합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

: 링크 위로 마우스를 이동할 때 호버에 의해 추가되는 특별한 스타일입니다.

팁: :호버 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.

팁: :link selector는 방문하지 않은 페이지의 링크 스타일을 설정하고, :visited selector는 방문한 페이지 링크의 스타일을 설정하고, :active selector는 현재 스타일을 설정합니다. 링크를 클릭하세요.

참고: 원하는 효과를 생성하려면 CSS 정의에서 :hover가 :link 및 :visited 뒤에 위치해야 합니다! !

<style media="screen">
  .pagination li {
line-height: 25px;
list-style-type:none;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
 
  </style>
  <body>
    <div class="pagination">
      <ul>
        <li><a href="#">Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a 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="#">Next</a></li>
      </ul>
    </div>
 
  </body>

CSS:호버 선택기 사용법에 대한 간략한 소개

관련 기사