电商运营实战专家

css:hover 鼠标经过图像替换效果

经过几期的努力,终于开通了原创的申明,以及赞赏功能,首先感谢腾讯微信公众平台,对咱们的一个认可和支持,让我们有更大的动力去编写更好的文章内容。

今天主要和大伙们来分享一个小小的关于技术内容的帖子,就是我们经常在很多电商平台上面看到的一些网页效果,比例鼠标经过,图片替换。

如图所示:

图片01:

其实原理很简单 实现只需要准备两张图片;之后,只需要用CSS中的hover属性,既可以解决。

那么今天让我们来说说他的一个原理吧,首先得需要dreamweaver软件,如果之前没有接触过的,可以在我们的公众号里面,选择之前dreamweaver的公开课程,系统化学习。

第一步新建HTML 文档:

图片02:

之后注意事项:

CSS 样式里面的内容:一般写在 <head> </head>之间。

css样式的命名规范 一般用 点  .{…….}  其中 .代表类名,除此之外,也可以用#{……}, 其中#代表id,两种之间的区别是,类名class,可以重复使用,然而 id(#)一个页面只能出现一次。

类名命名规范:

首字母英文+数字组合,切忌使用html标签命名。如图所示:

 

图片03:

第二步:所有正文部分的内容,需要写在body里面如图所示

正文里面的内容,可以是图片,文字,视频,脚步,等等

 

第三步:接下来:我们来说说,鼠标经过的时候,图像链接替换的原理:

我们可以现在正文部分 body里面输入这么一段内容:

<div class=”box1″>

<a href=”#” target=”_blank”></a>

</div>

其中:box1 为 class类名 可以自定义;

a为链接标签;之前我们在dw公开课程中,也提起过,

href=设置链接,

target=’_blank’,代表设置新窗口弹出,

好了,正文部分完成之后,接下来,我们可以来设置 样式部分的内容,就是在head里面的内容

<style>

.box1 a{ width:300px; height:300px; background:#096; display:block;}

.box1 a:hover{ background:#6FF;}

</style>

其中: width:宽度;height:高度 background:背景颜色,display:block 显示固定

:hover代表鼠标经过的时候,替换背景颜色,效果如图所示;

 

图片04:

好了,原理说完,接下来呢,我们可以做一个小小的实例,先看一下效果,后期可以跟着我们的视频当中来操作一下,

图片05

 

视频时长:20分钟左右,建议使用wifi环境下面,土豪随意


未经允许不得转载:岛识 » css:hover 鼠标经过图像替换效果
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

天行健,自强不息 。地势坤,厚德载物!