我们添加悬停效果只添加三行代码 - 在线编辑器

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    #navlist {
      position: relative;
    }

    #navlist li {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 0;
    }

    #navlist li,
    #navlist a {
      height: 44px;
      display: block;
    }

    #home {
      left: 0px;
      width: 46px;
    }

    #home {
      background: url("/examples/img_navsprites_hover.gif") 0 0;
    }

    #home a:hover {
      background: url("/examples/img_navsprites_hover.gif") 0 -45px;
    }

    #prev {
      left: 63px;
      width: 43px;
    }

    #prev {
      background: url("/examples/img_navsprites_hover.gif") -47px 0;
    }

    #prev a:hover {
      background: url("/examples/img_navsprites_hover.gif") -47px -45px;
    }

    #next {
      left: 129px;
      width: 43px;
    }

    #next {
      background: url("/examples/img_navsprites_hover.gif") -91px 0;
    }

    #next a:hover {
      background: url("/examples/img_navsprites_hover.gif") -91px -45px;
    }
  </style>
</head>

<body>
  <ul id="navlist">
    <li id="home"><a href="default.asp"></a></li>
    <li id="prev"><a href="css_intro.asp"></a></li>
    <li id="next"><a href="css_syntax.asp"></a></li>
  </ul>
</body>
</html>
​x
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>蜜蜂教程(mifengjc.com)</title>
  <style>
    #navlist {
      position: relative;
    }
​
    #navlist li {
      margin: 0;
      padding: 0;
      list-style: none;
      position: absolute;
      top: 0;
    }
​
    #navlist li,
    #navlist a {
      height: 44px;
      display: block;
    }
​