| JavaScript鼠标移入/移出改变样式 | 您所在的位置：网站首页 › js移入 › JavaScript鼠标移入/移出改变样式 |
JavaScript鼠标移入/移出改变样式
|
编程目的：当鼠标放上按钮时div出现，当鼠标移出时div也随之消失。
鼠标移入/移出改变样式
*{ margin: 0px; padding: 0px; text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
#app5{ margin: 10px auto; width: 222px; position: relative; }
#app5 input{ height: 40px; width: 80px; position: absolute; left: 71px;}
#tip{ width: 220px; height: 60px; border: 1px solid rgba(255, 0, 0, 0.692); background: rgba(255, 218, 54, 0.534); line-height: 31px; display: none; position: absolute; top: 40px; }
啦啦啦 window.onload = function(){ // 获取元素 var yon = document.getElementsByTagName("input")[0]; var tip = document.getElementById("tip"); // 鼠标移入事件 yon.onmouseover = function(){ tip.style.display = "block"; yon.value = "将鼠标移出"; } // 鼠标移出事件 yon.onmouseout = function(){ tip.style.display = "none"; yon.value = "将鼠标移入"; } }效果图： |
【本文地址】
公司简介
联系我们