鼠标经过样式-常用

原创 2016年08月30日 13:30:46

前后翻转:

<style type="text/css">
 *{margin:0px;padding:0px;}
 #nav{width:280px;height:500px;margin:50px;perspective:400px;float:left;}
 #nav p{height:40px;width:200px;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li{width:200px;height:40px;list-style:none;position:relative;transform-style:preserve-3d;transition:0.5s;
  display:block;margin:1px;cursor:pointer;}
 #nav ul li:hover{transform:translateZ(30px) rotateX(360deg) scale(1.1);}
 #nav ul li div:nth-child(1){height:40px;width:200px;background:#f96;}
 #nav ul li div p{font-size:16px;font-family:"微软雅黑";text-align:center;line-height:40px;}

</style>


<div id="nav">
<ul>
<li>
<div><p>Home</p></div></li>
<li>
<div><p>javascript</p></div></li>
<li>
<div><p>div+css</p></div></li>
<li>
<div><p>Tel</p></div></li>
<li>
<div><p>Abouet</p></div></li>
</ul>
<p>前后翻转</p>

</div>


上浮:

<style type="text/css">
 *{margin:0px;padding:0px;}
 #nav{width:280px;height:500px;margin:50px;perspective:400px;float:left;}
 #nav p{height:40px;width:200px;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li{width:200px;height:40px;list-style:none;position:relative;transform-style:preserve-3d;transition:0.5s;display:block;margin:1px;cursor:pointer;}
 #nav ul li div:nth-child(1){height:40px;width:200px;background:#f96;}
 #nav ul li div p{font-size:16px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li:hover{transform:translateZ(30px) scale(1.1);}
</style>


<div id="nav">
<ul>
<li>
<div><p>Home</p></div></li>

<li>
<div><p>javascript</p></div></li>
<li>

<div><p>div+css</p></div></li>
<li>
<div><p>Tel</p></div></li>
<li>
<div><p>Abouet</p></div></li>
</ul>
<p>上浮</p>
</div>


左右翻转:

<style type="text/css">
 *{margin:0px;padding:0px;}
 #nav{width:280px;height:500px;margin:50px;perspective:400px;float:left;}
 #nav p{height:40px;width:200px;font-size:18px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li{width:200px;height:40px;list-style:none;position:relative;transform-style:preserve-3d;transition:0.5s;display:block;margin:1px;cursor:pointer;}
 #nav ul li div:nth-child(1){height:40px;width:200px;background:#f96;}
 #nav ul li div p{font-size:16px;font-family:"微软雅黑";text-align:center;line-height:40px;}
 #nav ul li:hover{transform:rotateY(360deg) scale(1.1);}
</style>


<div id="nav">
<ul>
<li>
<div><p>Home</p></div></li>
<li>
<div><p>javascript</p></div></li>
<li>
<div><p>div+css</p></div></li>
<li>
<div><p>Tel</p></div></li>
<li>
<div><p>Abouet</p></div></li>
</ul>
<p>左右翻转</p>
</div>


版权声明:本文为博主原创文章,未经博主允许不得转载。

如图样式,鼠标经过或者点击显示以下样式

实践题 - 选项卡 *{ padding:0px; margin: 0px; font:12px no...
  • sinat_36146776
  • sinat_36146776
  • 2016年09月23日 21:20
  • 633

canvas实现折点图,并有鼠标hover样式

1、直接上图,看最终样式 2、html代码 您的浏览器暂不支持canvas 3、js代码 $(function(){ var c=document.getElementBy...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2017年02月05日 16:17
  • 1308

HTML中常用鼠标样式

语法: cursor : auto  auto :   默认值。浏览器根据当前情况自动确定鼠标光标类型。 all-scroll : ...
  • GuXAiXia
  • GuXAiXia
  • 2017年05月25日 16:08
  • 250

CSS样式 鼠标经过连接

比如:一:#a,b{…………}       二:#a b{…………}       三:#a:b{…………}       四:#a.b{…………} 一、一个id叫a和一个标签是b的样式 二、一...
  • codecross
  • codecross
  • 2013年03月07日 11:06
  • 590

鼠标滑过显示图片大图效果

描述: 当用户将鼠标放到 图片上时,显示图片的大图。 效果图: 说明: 用到了mouseover、mouseout、mousemove三个事件,分别表示鼠标滑过图片、鼠标移除图片、鼠标...
  • QianShouYuZhiBo
  • QianShouYuZhiBo
  • 2014年06月06日 21:46
  • 2722

css+jquery鼠标滑过,显示下拉菜单效果

需求:鼠标滑过菜单项,显示下拉菜单。如图: html代码解析:因为下拉菜单为列表,所以需要使用 标签 ...
  • hlbt0112
  • hlbt0112
  • 2016年09月13日 15:00
  • 2787

Qlabel 自定义鼠标点击事件以及文本样式效果设计

需要设计的效果是: 1、标题、内容以及图片均具有点击的效果; 2、鼠标放置在标题和内容上,文字变色并且高亮显示,无需下划线; 3、鼠标的形状:在放置在标题和内容上时由箭头变成小手指。 整个窗体采用...
  • lggrief
  • lggrief
  • 2016年10月12日 13:48
  • 791

css实现 : 鼠标移动上去显示div,移开隐藏div

一、实现效果:     注:此时鼠标还没移进红色框,红色框内的内容隐藏起来了    注:此时鼠标移到红色框区域内了,内部隐藏的东西显示出来了 二、css控制具体代码: 测试对象转数组...
  • baidu_32262373
  • baidu_32262373
  • 2016年07月11日 15:19
  • 9642

【HTML】—鼠标移入或移出表格,表格变色

本文积累了几种鼠标移入或者移出html的table表格时,表格背景色变化的几种方法。 一、利用样式CSS表达式 在样式里写表达式expression,实现鼠标经过表格行上变色,但在fire...
  • u013034793
  • u013034793
  • 2017年11月18日 21:35
  • 207

layer弹出框覆盖在触发mouseenter 和 mouseleave事件元素上的一种解决方法

问题描述: 需求是在table中有告警数据,当鼠标移动到告警数据上,弹出该告警数据关联的信息(关联数据也是表格形式),移开鼠标时,弹出框关闭。 但是在关闭时有这种情况,当弹出框在告警数据的上层时,...
  • u011983028
  • u011983028
  • 2017年07月06日 11:12
  • 841
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:鼠标经过样式-常用
举报原因:
原因补充:

(最多只允许输入30个字)