이 글은 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:hover selector_html/css_WEB-ITnose
위 내용은 CSS:호버 선택기 사용법에 대한 간략한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
