Question

当我将鼠标悬停在我的页面上时，我试图更改图片。我也看过很多这方面的例子，我仍然无法做到这一点。谁能告诉我哪里出错？

这是html我的代码： -

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

CSS： -

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

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

Answer 1

试试这个：

<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更改为您的图片尺寸。我测试了这个解决方案。

Answer 2

这有效

#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;
}

使用html或css悬停的图像

2 个答案: