《JavaScript学习笔记一》鼠标提示框

最新推荐文章于 2023-03-28 10:00:34 发布

HelloWorld_EE

最新推荐文章于 2023-03-28 10:00:34 发布

阅读量904

点赞数 1

分类专栏： javascript 文章标签： javascript 提示框鼠标

本文链接：https://blog.csdn.net/u010412719/article/details/51526719

版权

《JavaScript学习笔记》：鼠标提示框

在我们的许多登陆界面都会有鼠标提示框的应用，例如下面的截图就是一个比较好的例子：

下面我们就实现这个比较简单的例子

这个的实现原理比较简单，如下：

1、当鼠标移动到checkbox上面时，提示框出现。

2、当鼠标移出checkbox时，提示框就消失。

鼠标移入和移出对应的事件为：onmouseover/onmouseout

出现和消失在div上面的表现形式为：divName.style.display=’block’ ;divName.style.display=’none’ (divName为标签div的id)

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    </head>

    <style>
    #div1 {
    width:200px;height:100px;background:red;border:1px;display:none;}
    </style>
    <body>
    <input t

最低0.47元/天解锁文章

HelloWorld_EE

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript学习笔记一》鼠标提示框

《JavaScript学习笔记》：鼠标提示框在我们的许多登陆界面都会有鼠标提示框的应用，例如下面的截图就是一个比较好的例子：下面我们就实现这个比较简单的例子这个的实现原理比较简单，如下：1、当鼠标移动到checkbox上面时，提示框出现。2、当鼠标移出checkbox时，提示框就消失。鼠标移入和移出对应的事件为：onmouseover/onmouseout出现和消失在div上面的表现形式为：divN
复制链接

扫一扫

专栏目录