css3购物网站商品文字提示实例_html/css_WEB-ITnose

原创: 2016-06-24 11:37:05675浏览

css3购物网站商品文字提示实例
先来看效果图：

当鼠标划过图片时，有着泰迪熊黑色长方形的背景就会出现。
来看HTML5+CSS3代码：

购物网站商品文字提示
泰迪熊

复制代码

代码解释：
构建一个div，div中存放一张需要展示的商品图片，再添加商品图片的文字表述，
给div添加css样式属性，给p元素也添加css样式属性，其中那个高度设置为0，不可见。重点在与用到了绝对定位与相对定位，还对他们不了解的请看此贴http://www.00h5.com/thread-133-1-1.html
把描述文字定位好后添加transition动画，这里我们要鼠标划过div的时候改变的只是p的高度为原来30px即可，而动画也是设置高度属性

css3购物网站商品文字提示实例 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：简单实现兼容各大浏览器的js复制内容到剪切板_html/css_WEB-ITnose下一条：面试必备：文本框与按钮的最简组合_html/css_WEB-ITnose

【24期】《PHP小白到大牛》线上班，开始报名了！