<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. JDK并发包二

    JDK并发包二 线程复用--线程池 在线程池中,总有那么几个活跃的线程,当程序需要线程时可以从池子中随便拿一个控线程,当程序执行完毕,线程不关闭,而是将这个线程退会到池子,等待使用. JDK提供了一套 ...

  2. 如何编写shell脚本

    1.首先创建一个目录 vi hello.sh 2.编写shell第一行 #!/bin/bash    (为了声明是shell脚本,第一行都要这么写) 3.可以添加注释     #the first p ...

  3. 一个线上 Maven 诡异问题排查过程

    å. 前言 现在的大部分 Java 应用基本都是通过 Maven 进行组织的,不论是分布式应用还是单体集群应用往往都会通过一个 父 POM 加若干子 POM 完成项目的组织.然而这种多应用多模块的拆分 ...

  4. Auto.js无障碍免root脚本开发学习

    Auto.js 简单入门 官方文档:https://hyb1996.github.io/AutoJs-Docs/#/ https://blog.csdn.net/QiHsMing/article/de ...

  5. 乘风破浪，Windows11预览版升级和安装，积极准备中的大跃进

    安装Windows11 暂时官方还没出可靠的ISO 升级到Windows11 预览版 关于一些限制 目前DEV预览通道对从老系统升级到Windows11暂时没有什么限制,只是会提示你可能不太好,但是安 ...

  6. zabbix4.0升级到zabbix5.0

    1 更新yum源 # yum erase zabbix-release-4.0-1.el7.noarch # rpm -ivh https://mirrors.aliyun.com/zabbix/za ...

  7. 20、nginx之ngx_http_upstream_module模块

    nginx的ngx_http_upstream_module模块是用于nginx反向代理的,默认在安装nginx时已经被安装,ngx_http_upstream_module模块 的内容应放于 ngi ...

  8. 5、修改oracle的字符集

    注意:修改字符集前需要将表空间进行数据泵备份: 5.1.修改server端字符集: 1.登录到oracle实例查看字符集: [oracle@slave-node2 ~]$ echo $ORACLE_S ...

  9. 在Docker运行的Nignx内部署前后端分离项目

    环境准备: Linux服务器: IP: 192.168.1.10 前端打包后的Vue项目: Port-3000, 请求地址192.168.1.10:8080 后端打包后的Java项目: Port-80 ...

  10. Software Architecture软件架构（方法、模式与框架）纵横谈

    Software Architecture软件架构是啥 随着软件行业的发展,软件的规模越来越大,"Software Architecture软件架构"这个名词开始频繁出现.&quo ...