1

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

这是html我的代码：-

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

CSS：-

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

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

2 回答 2

0

这有效

#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;
}
于 2013-04-20T15:47:04.630 回答
0

尝试这个：

<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您的图像尺寸。这个解决方案有效，我测试过。

于 2013-04-20T15:46:53.330 回答