<style>

#d1{

width:200px;

height:200px;

border:1px solid #000;

transition:background 4s linear,transform 5s linear;

}

//当鼠标移入div上时

#d1:hover{

background:#ddd;

transform:rotate(45deg)  scale(0.5);

}

</style>

<body>

//页面中有一个div

<div id="d1"></div>

</body>

当鼠标移入div上时，div的背景色在4s之内渐变为灰色，同时在5s之内顺时针旋转45度，且尺寸缩小一半；当鼠标移走时，再渐变恢复初始样式的更多相关文章

  1. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  2. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  3. angularjs 怎么获取鼠标焦点 鼠标移入显示浮动的div提示框

    首先,我们要清楚几个基础的知识,angular的两个鼠标移入移出的指令------ng-mouseover(鼠标移入)ng-mouseleave(鼠标移出)--------还有就是window.eve ...

  4. Tooltip鼠标hover放上时文字提示

    使用content属性来决定hover时的提示信息. 由placement属性决定展示效果: placement属性值为:                 方向-对齐位置: 四个方向:top.left ...

  5. 转：zTree树控件key配置之title：zTree树节点名称过长如何省略显示且鼠标移入节点上能够显示全称

    当树节点的名称有些很长时,全部显示出来显得很拥挤的情况下,我们会想到用省略节点名称来代替,当鼠标移入节点时能够显示该节点的全称.这样我们应该如何做呢? 首先,我们要在树的节点内多增加一个属性用于设置该 ...

  6. 鼠标悬浮到div上，div进行360°旋转

    <!DOCTYPE html> <html> <head> <title>旋转</title> </head> <styl ...

  7. div滚动条时div内容显示一半

    本文为博主原创,未经允许不得转载 今天在做页面浏览器适配时,将页面中的一个div进行放大时,出现了滚动条,但滚动条对应div中的 内容只能显示一半. 仔细对应属性样式时,div具有overflow:h ...

  8. JS鼠标移入，移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  9. marquee 滚动到文字上时停止滚动，自定义停止方法

    我要实现的效果如下图:当鼠标移到续费提醒文字上时,文字滚动停止,并出现后面的关闭按钮:当鼠标移出文字时,文字继续滚动,后面的关闭按钮不显示. 在网上查到的marquee停止滚动的的代码是这样的: &l ...

随机推荐

  1. Linux添加永久静态路由

    1.首先查看一下本机的路由 route -n 2.比如我们添加两条静态路由,访问192.168.142.100时通过192.168.142.10:访问192.168.142.200时通过192.168 ...

  2. 连接过的WiFi改了密码之后再次连接不让输入新密码还是用旧密码一直显示连接失败

    设置---网络和Internet---WLAN----管理已知网络----忘记    根据这个步骤就能忘记密码,重新输入新密码了.

  3. 高性能的Redis之对象底层实现原理详解

    对象 在前面的数个章节里, 我们陆续介绍了 Redis 用到的所有主要数据结构, 比如简单动态字符串(SDS).双端链表.字典.压缩列表.整数集合, 等等. Redis 并没有直接使用这些数据结构来实 ...

  4. js笔记5

    1.逻辑运算 ||  &&  ! ||:遇到第一个为true的值就中止并返回 &&:遇到第一个为false的值就中止并返回,如果没有false值,就返回最后一个不是fa ...

  5. jenkins pipeline的声明式与脚本式

    自从Jenkins 2.0 版本升级之后,支持了通过代码(Groovy DSL)来描述一个构建流水线,灵活方便地实现持续交付,大大提升 Jenkins Job 维护的效率,实现从 CI 到 CD 到转 ...

  6. jenkins+nexus上传插件发布制品到nexus

    nexus安装 nexus安装参考:https://www.cnblogs.com/afei654138148/p/14974124.html nexus配置 创建制品库 制品库URL:http:// ...

  7. 33、awk命令详解

    33.1.命令介绍: awk不仅仅是linux系统中的一个命令,而且是一种编程语言,可以用来处理数据和生成报告. awk的数据可以是一个或多个文件,可以是来自标准输入,也可以通过管道获取标准输入,aw ...

  8. 11、linux的目录结构

    11.1.查看磁盘的id: blkid 11.2.linux目录类似一个倒挂的树: / 是所有目录的顶点,目录磁盘和分区是没有关联的,因此/下不同的目录会对应不同的磁盘的不同的分区: linux中硬盘 ...

  9. JDK8安装包的下载安装方式以及环境变量的配置

    前面我们介绍了 <Java是什么?>.<OracleJDK是什么?OracleJDK的版本怎么选择?>.<OpenJDK是什么?>以及<OracleJDK 与 ...

  10. Problem 1566 - C - Spanning Tree 动态最小生成树

    Problem 1566 - C - Spanning Tree 给出一个联通图,然后每次加一条边,每次需要求最小生成树 1 #include <iostream> 2 #include ...