一张图片由A、B两部分组成，当鼠标移动上去时显示B部分，当鼠标移出时显示A部分。

来源：互联网发布：河北天然气知乎编辑：程序博客网时间：2024/05/06 14:55

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Remove.aspx.cs" Inherits="Sample_Remove" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        #divTest
        {
            width: 184px;
            height: 100px;
            background-image: url(../sampleImge/test.jpg);
            background-repeat: no-repeat;
            border: #000 solid 1px;
        }
        .divOver
        {
            background-position: -184px 0px;
        }
    </style>
    <script src="../JS/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#divTest").hover(
  function () { $(this).addClass("divOver"); },
  function () {
      $(this).removeClass("divOver");
  });
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="divTest"></div>
    </form>
</body>
</html>