<!-- 鼠标移入和移出input上:鼠标移入div显示,鼠标移出div隐藏 1. 获取input和div(已设置好div样式)2. div首先是display:none3. 当onmouseover的时候,div是display:block4. 当onmousemove的时候,div是display:none--><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#divBox {width: 200px;height: 200px;background-color: aquamarine;display: none;}</style></head><body><input type="checkbox" id="box_Btn"><div id="divBox">我出来啦</div></body><script>window.onload = function () {var obox_Btn = document.getElementById("box_Btn");var odivBox = document.getElementById("divBox");obox_Btn.onmouseover = function () {odivBox.style.cssText = "display: block;"}// 不能写onmousemove,onmousemove是指鼠标移动时就发生事件,但是onmouseout是指鼠标移出发生事件// 如果这里写onmousemove,那就是指鼠标只要经过了box_Btn或者在box_Btn上面发生移动,就不能出现divBoxobox_Btn.onmouseout = function () {odivBox.style.cssText = "display: none;"}}</script></html>
1200字范文,内容丰富有趣,写作的好帮手!