滑动门的解决方案

最好的结果是利用父子盒子来解决这个问题。代码实例如下：

           <!DOCTYPE html> 
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
  * {
  margin: 0;
  padding: 0;
  }
  div {
  height: 33px;
  background-image: url(images/bg.png); 
  background-repeat: no-repeat;
  float: left;
  }
  .left {
  width: 20px;
  background-position: left -144px;
  padding-left: 20px;
  }
  .right {
  background-position: right -144px;
  color: white;
  padding-right: 20px;
  line-height: 33px;
  }
  .left:hover {
  background-position: left -193px;
  }
  .left:hover .right {
  background-position: right -193px;
  }
  </style>
  </head>
  <body>
  <div class="left">
      <div class="right">abcd</div>
  </div>
  </body>
  </html>
posted @ 2017-05-12 22:49  木子李二  阅读(67)  评论(0)    收藏  举报