提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

[CSS] Image replacement, text-indent, hover sprite,

CSS Text Image Hover sprite
2023-09-14 09:00:56 时间

 

.sidebar a {
  display: block;
  line-height: 40px;
}
.sidebar .featured,
.sidebar .sales {
  background: url(sidebar.png) no-repeat;
  padding-left: 50px;
}
.sidebar .sales {
  background-position: 0 -80px;
}
.sidebar .featured:hover,
.sidebar .featured:focus {
  background-position: 0 -40px;
}
.sidebar .sales:hover,
.sidebar .sales:focus {
   background-position: 0 -120px;
}

 

<!doctype html>
<html lang="en">
  <head>
    <title>Sven's Snowshoe Emporium</title>
    <link rel="stylesheet" href="style.css" />
  </head>
 
  <body>
    <nav class="sidebar">
      <ul>
        <li><a class="featured" href="#">Featured Items</a></li>
        <li><a class="sales" href="#">Sale Items</a></li>
        <li><a href="#">Men's</a></li>
        <li><a href="#">Women's</a></li>
        <li><a href="#">Children's</a></li>
      </ul>
    </nav>
  </body>
</html>

  

 

相关文章