CSS控制鼠标经过图片后显示不同的背景
  • 资讯中心
  • 行业新闻相关
  • 专家建站观点
  • 建站信息百科
CSS控制鼠标经过图片后显示不同的背景
来源: 飞云专业建站工作室发布时间:2016-03-09 16:26:55

我们在做网站的时候,经常需要使用一个特效,就是鼠标经过一个图片的时候,该图片会变成另外个效果,其实这个过程是CSS控制的HOVER效果,用两张图片来实现的。例如:


blob.pngblob.png

下面由湖南长沙网站建设公司-飞云专业建站工作室来和大家分享一下具体实现过程:

一、我们首先需要制作2张图片,一张是鼠标不在上面时候的效果图(a),一张是鼠标悬停时的效果图(b)。

二、我们设置某个盒子的背景图为a,设置他的hover背景图为b。

代码具体如下:

<div id="youshi1">

<a></a>

</div>




CSS代码:

#youshi1 a{ width:200px; height:200px; display:block;background:url(../images/swfz01a.png) no-


repeat;margin:0 auto;background-size:100% 100%}

#youshi1 a:hover{background:url(../images/swfz01b.png) no-repeat;background-size:100% 100%}


下面大家可以试试,是否显示了正常的特效呢?


转载请注明出处:http://www.feiyunjz.com/news/baike/144.html 尊重原创

注:以上内容由湖南长沙网站建设公司-飞云专业建站工作室提供。

相关文章
  • 免费咨询

    为您提供一对一解决方案
    立即咨询
  • 联系方式

    13517315625

    全国7×24小时热线服务
免费咨询
您的姓名
您的电话
您的邮箱
咨询内容
验证码 看不清楚,点击刷新
我们会尽快联系您,等待期间需要获取更多信息,请继续访问联系我们。感谢您对我们产品及服务的支持。