本文摘自PHP中文网,作者藏色散人,侵删。
css设置鼠标变背景的方法:首先打开相应的前端代码文件;然后设置样式为“.logo-link {background-image:url(...);}.logo-link:hover,.logo-link:active {}”即可。
推荐:《css视频教程》
CSS代码实现鼠标移过更换背景图片
很多时候我们都能够看到,当我们用鼠标移过去的时候,指向的图片将会变成另外一个图片。下面我就将实现该功能的代码分享出来,希望能够帮助到大家。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!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>
<title> new document </title>
<meta name= "generator" content= "editplus" />
<meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" />
<style type= "text/css" >
.logo-link {
width:500px;
height:500px;
text-decoration:none;
display:block;
background-image:url(bj1.jpg);
background-position:0px 0;
background-repeat: no-repeat;
}
.logo-link:hover,.logo-link:active {
background-position:0 0;
background-image: url(bj2.jpg);
}
</style>
</head>
<body>
<a href= "http://www.baidu.com" class = "logo-link" ></a>
</body>
</html>
|
以上就是css怎么设置鼠标变背景的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么设置text不可编辑
css怎么对文字分栏
css怎么清除空白
css怎么实现超出高度隐藏
input实现文字超出省略号(代码示例)
css怎么增加背景图片
什么是css,其主要作用是什么
怎样实现meta标签中的viewport来控制设备屏幕的css属性
css字体颜色的设置方法
javascript和css的区别是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » css怎么设置鼠标变背景