checkbox下面的提示框鼠标移入时显示，移出时隐藏

最新推荐文章于 2022-12-09 00:34:12 发布

转载最新推荐文章于 2022-12-09 00:34:12 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Yimi/p/5922837.html

文章标签：

#javascript #ViewUI

本文通过两个实例展示了如何使用JavaScript来控制HTML元素的显示与隐藏，并实现按钮点击确认功能。第一个实例中，当鼠标悬停在输入框上时，会显示一个提示框；鼠标离开后，提示框消失。第二个实例则是点击按钮进行确认操作。

<html>
<head>
<title>shu</title>
    <style>#div1{width:200px;height:200px;border:1px solid red;background:grey;display:none;}</style>
    <script>
        function show(){
        var a=document.getElementById("div1");
        a.style.display='block';
        }
        function over(){
        var a=document.getElementById("div1");
        a.style.display='none';
        }
    </script>
</head>
<body>
    <input type="checkbox" onmouseover="show();" onmouseout="over();"/>
        <div id="div1">
        为了您的信息安全
        </div>
</body>
</html>

鼠标移入到input上的时候，让div1显示
鼠标移出input的时候，让div1隐藏

div1显示：
div1的display变成block

------------------------------------------------------------------------------------------------------------------------

事件：用户操作

on click

------------------------------------------------------------------------------------------------------------------------

div1.style.display='block';

. 的

div1的style的display

<html>
<head>
<title>shu</title>
    <script>
        function show(){
        var i=document.getElementById("tishi");
        i.click=alert("您确定吗？");
        }
    </script>
</head>
<body>
    <div id="div1">
        点击确认进入下一步操作：
    </div>
    <button id="tishi" onclick="show();">确定</button>
</body>
</html>