使用 html 或 css 悬停图像答案

【问题标题】：Image hovering using html or css使用 html 或 css 悬停图像
【发布时间】：2013-04-13 21:07:25
【问题描述】：

当我将鼠标悬停在页面上时，我正试图更改页面上的图像。我也看到了很多关于这个的例子，但我仍然无法完成这项工作。谁能告诉我哪里出错了？

这是我的 html 代码：-

  <body>
        <a id="swap"> </a>
    </body>

css:-

 #swap {
        background-image:url('slide1.jpg');
    }

#swap:hover {
    background-image:url('slide2.jpg');
}

【问题讨论】：

标签： html css image hover

【解决方案1】：

这行得通

#swap {
   display: block;
   background: url('http://lorempixel.com/output/cats-q-c-100-100-8.jpg') no-repeat; 
}
#swap:hover {
   background: url('http://lorempixel.com/output/catsq-c-100-100-9.jpg') no-repeat;
}

【讨论】：

【解决方案2】：

试试这个：

<style type="text/css">
#swap {
    display:block;
    position:relative;
    height:100px;
    width: 200px;
    background-image: url(slide1.jpg);
    background-repeat:no-repeat;
    }

#swap:hover {
    background-image: url(slide2.jpg);
    background-repeat:no-repeat;
} 
</style>

<body>

     <a href=""><div id="swap"></div></a>

</body>

将width 和height 更改为您的图像尺寸。这个解决方案有效，我测试过。

【讨论】：

所以图片的宽高应该小于id“swap”的宽高吧？