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

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

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

文章标签：

#javascript #c# #ViewUI

本文通过两个实例展示了如何使用HTML和JavaScript实现元素的显示与隐藏功能。第一个实例中，利用鼠标悬停事件控制div元素的显示与隐藏；第二个实例则是通过按钮点击事件触发提示信息。这些示例有助于理解事件监听及DOM操作的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>