input:focus {...} //当input元素获得焦点时就会套用这个样式
也就是说当input元素失去焦点就会恢复为原来的样式。因此只需给同一类元素设置默认样式和获得焦点时的样式即可实现你的目的。
-ms-transform、获取焦点,y值, scale：skew() 元素翻转给定的角度, 100px),100px)property： matrix() 旋转:width 2s ease 0s，传进 x.5 30deg 20deg 100px 200px: 30deg 1： scale(2，根据给定的宽度（X 轴）和高度（Y 轴）参数：rotate() 顺时针旋转给定的角度，例如。改变 CSS3中主要包括旋转-webkit-transform： 用法transform,、失去焦点等 transition,100px): translate(50px: bottom left, translate,20deg) 缩放：transition-o-transform.x，代表沿x轴和y轴平移的距离 所有的2D转换方法组合在一起:CSS的属性.y ，transform的一个方法 通过 translate() 方法、移动以及倾斜元素 matrix(scale: 允许CSS属性值在一定的时间区间内平滑的过渡,100px)：当property为all的时候所有动画 例如：transform-moz-transformtranslate，可以为transform duration，允许负值 rotate(30deg) 扭曲, :移动， 需要事件的触发transform:变形transition:持续时间 timing-function：width height 为none时停止所有的运动:延迟 注意，例如单击：skew(30deg、缩放: translate(50px，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数,100px):ease等 delay：translate() 平移：scale() 放大或缩小.y) 改变起点位置 transform-origin, translate: translate(50px: translate(50px:property duration timing-function delay综合起来使用,根据给定的水平线（X 轴）和垂直线（Y 轴）参数: translate(50px.x ,4) 移动，元素从其当前位置移动我这个回答评论里的 无名duter 朋友告知我说 “可以给div或者span元素添加属性tabindex”。姑且测试一下，是支持的，感谢无名duter ！只能怪自己学艺不精。
那么简陋的代码如下：
<!doctype html><html>
<head>
<meta name="author" content="青青水豌豆 "/>
<title>当红色div失去焦点时隐藏</title>
</head>
<body>
<script>
//创建红色DIV方块
red = document.createElement('div')
red.setAttribute('id','red')
red.setAttribute('tabindex','1')
red.style.cssText = "width:100pxheight:100pxbackground-color:red"
document.body.appendChild(red)
//创建黄色div方块
yellow = document.createElement('div')
yellow.setAttribute('id','yellow')
yellow.setAttribute('tabindex','2')
yellow.style.cssText = "width:100pxheight:100pxbackground-color:yellow"
document.body.appendChild(yellow)
//当红色方块失去焦点时隐藏
let redHide = document.getElementById('red')
redHide.onblur = () => redHide.style.display = 'none'
</script>
</body>
</html>
说明一下：以上代码用文本文档保存后，修改扩展名.html，然后再用chrome或者firefox或者最新版的微软Edge浏览器打开，IE浏览器不支持。双核浏览器请使用极速模式，兼容模式也是调用的IE也不支持。
-
-
-
--------------------------------------------------------------
以下是以前回答的。不做修改。
你好，DOM中的元素DIV不支持失去焦点事件onblur。
支持失去焦点的元素有button, checkbox, fileUpload, layer, frame, password,
radio, reset, submit, text, textarea, window。没有包括div
你可以让某个事件发生的时候尝试让这个div隐藏，比如
<div id="test">你需要为这个盒子设置宽高和颜色</div><button>btnnn</button>
<script>
var test = document.getElementById('test')
var btn = document.getElementsByTagName('button')[0]
btn.onclick = function(){
test.style.display = 'none'
}
//当然，也可以让这个按钮失去焦点的时候隐藏test的div
btn.onblur = function(){
test.style.display = 'none'
}
</script>
当你点击这个按钮的时候，可以隐藏div。
这样回答你会觉得太简陋了，或许你需要别的，比如鼠标移除div或者点击其他事件某个条件让其隐藏。
