web-前端设计之鼠标悬停样式
2017-09-26 11:23
411 查看
这里展示的是鼠标悬停时的边框的样式,以及里面的字体样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> .demo{ border: 1px solid #ffffff; width: 100px; height: 100px; text-align: center; float: left; } .icon{ width: 60px; height: 56px; background: url(img/tb01.png) no-repeat; margin: 10px auto; } .demo:hover{ border: 1px solid red; cursor: pointer; } .demo:hover .icon{ background: url(img/tb02.png) no-repeat; } .demo:hover .font{ color: red; } </style> </head> <body> <div class="demo"> <div class="icon"> </div> <div class="font"> 文本内容 </div> </div> <div class="demo"> <div class="icon"> </div> <div class="font"> 文本内容 </div> </div> <div class="demo"> <div class="icon"> </div> <div class="font"> 文本内容 </div> </div> <div class="demo"> <div class="icon"> </div> <div class="font"> 文本内容 </div> </div> </body> </html>
相关文章推荐
- 几个web前端表格样式设计的链接网址(备忘)
- 关于鼠标悬停 离开 选中样式调整
- [原型设计]Axure制作鼠标悬停图片切换效果
- Web注册表单设计样式的研究(上)
- 【day 17】python编程:从入门到实践学习笔记-基于Django框架的Web开发-设计样式和部署(一)
- web设计前端面试经 给刚毕业的同学一些经验 izank 赞客
- 大巧不工Web前端设计修炼之道——(4)让你的设计深入人心,可用性设计
- web 改变鼠标样式
- WEB前端 -- CSS部分样式
- web前端javaScript仿京东淘宝图片鼠标浮动图片上移效果
- Web前端js中鼠标事件
- [Web前端技术教学]CSS列表样式范例练习-无序列表-2
- Web前端从入门到放弃(js鼠标拖拽特效)
- 南通学UI设计和web前端设计的区别
- web前端实验一:利用Js捕获鼠标事件实现图片切换
- 架构设计:前后端分离之Web前端架构设计
- web前端javaScript仿京东淘宝图片鼠标浮动图片上移效果
- 前后端分离之Web前端架构设计
- 如何改变,鼠标悬停时候鼠标样式?
- WEB前端之表格设计和盒子模式