A brief introduction to the usage of CSS:hover selector-CSS Tutorial-php.cn

A brief introduction to the usage of CSS:hover selector

不言

Release： 2018-08-28 11:15:11

Original

2563 people have browsed it

This article brings you a brief introduction to the usage of CSS:hover selector. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

:Hover is a special style added when the mouse moves over the link.

Tip: The :hover selector can be used on all elements, not just links.

Tips: The :link selector sets the link style for unvisited pages, the :visited selector sets the style for visited page links, and the :active selector sets the link style when you click on it. style.

Note: In order to produce the desired effect, :hover must be located after :link and :visited in the CSS definition! !

<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>

Copy after login

Related recommendations:

CSS:hover selector_html/css_WEB-ITnose

##CSS3 selector attribute selection Device

The above is the detailed content of A brief introduction to the usage of CSS:hover selector. For more information, please follow other related articles on the PHP Chinese website!