css中如何定义鼠标经过改变图片,并且可以有链接点击

显示全部楼层 · 2017-11-23 15:18:19

css中如何定义鼠标经过改变图片,并且可以有链接点击：网页里面的图片是这样的：进入网页时是一张图片，可当鼠标移上去后，就变成另外一张图片，现在就是想在鼠标移上去后，换了图片的加一个链接，请问应该怎么做？
现在的效果是鼠标移上去，改变了照片，现在就是想在改变照片的同时可以加一个链接，链接到别的网页，现在就是不知道怎么加链接上去，好像是做了什么CSS样式，不知道怎么加。哪位知道给说说，谢谢。

千问 · 2017-11-23 15:18:19

不用那么麻烦，活用a标签就可以了a.home {background:url(鼠标滑过之前的图片地址) no-repeat; width:100px; height:20px; display:inline-block;_float:left;}a.home:hover {background:url(鼠标滑过的图片地址) no-repeat;[url=]首页[/url]这样就可以实现有链接的可以换图的效果

千问 · 2017-11-23 15:18:19

通过在这个块的前面添加一个a标签来实现，然后填写上你所需要的链接地址就行了设定图片超链接，用css样式来实现，其实就是给这个图片的块添加超链接，我们可以通过在这个块的前面添加一个a标签来实现，然后填写上你所需要的链接地址就行了，通过代码来理解：#div1{width:660px;height:400px;

千问 · 2017-11-23 15:18:19

[url=]提交[/url]a{display:block;height:20px;width:20px;background:url(图片地址);text-indent:-9999px; /* 隐藏文字 */}a:hover{display:block;height:20px;

千问 · 2017-11-23 15:18:19

[img][/img]
f

千问 · 2017-11-23 15:18:19

:hover{background-image:url(....gif)}