鼠标经过替换背景和文字

鼠标经过的时候替换背景和文案

（1）准备一张图片

图片地址：https://www.csgo.com.cn/data/images/e1.jpg

(2)代码部分

HTML

 <!-- 测试鼠标hover替换背景图片 -->
    <div class="entrance">
        <a href="charts.html" class="e1">军衔<span></span>等级</a>
    </div>

CSS

  a:link,
   a:visited,
   a:hover,
   a:active {
       cursor: pointer;
   }

   .entrance a {
       float: left;
       width: 240px;
       height: 60px;
       padding-top: 140px;
       margin-right: 13px;
       margin-top: 13px;
       text-align: center;
       font-size: 24px;
       color: #232323;
       font-weight: bold;
       margin-bottom: 30px;
   }

   .entrance a.e1 {
       background: url(https://www-mayouchen.csgo.com.cn/data/images/e1.jpg) no-repeat 0 -200px;
   }

   .entrance a span {
       display: inline-block;
       width: 2px;
       height: 18px;
       overflow: hidden;
       margin: 0 20px;
       background-color: #232323;
   }

   .entrance a:hover {
       background-position: 0 0;
       color: #fff;
   }

   .entrance a:hover span {
       background-color: #fff;
   }

说明：
这里使用了background-position 属性，及在鼠标hover的时候改变图片展示的位置，然后修改文字的颜色。