三.鼠标提示框之移入移出效果

最新推荐文章于 2023-12-21 10:19:32 发布

qbz-1234

最新推荐文章于 2023-12-21 10:19:32 发布

阅读量361

点赞数

文章标签： css js

本文链接：https://blog.csdn.net/qubaozhong1234/article/details/114799178

版权

问题：鼠标移入到input上的时候，让div1显示；鼠标移出input的时候，让div1隐藏。
实现：div1显示，就是让div1的display变成block。
事件:简单的说就是用户操作onclick
div1.style.display='block’的意思是把div1的style的display属性赋值为block就可显示。
get Element By Id
获取元素用 ID—>通过ID获取元素
CSS样式实现：

<style>
 #div1 {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            border: 1px solid #999;
            display: none;
        }
 </style>

html代码实现：

<body>
    <!-- 此种写法在Chrome和IE不会出现浏览器兼容问题，但是火狐浏览器会出现兼容问题。不推荐使用此种方法。-->
   <!-- <input type="checkbox" onmouseover="div1.style.display='block';" 
                           onmouseout="div1.style.display='none';"
                          />  -->
    <!-- 兼容写法不会出现浏览器兼容问题，如下所示-->
    <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'" 
                           onmouseout="document.getElementById('div1').style.display='none';"/>
    <div id="div1">显示</div>
</body>

qbz-1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三.鼠标提示框之移入移出效果

问题：鼠标移入到input上的时候，让div1显示；鼠标移出input的时候，让div1隐藏。实现：div1显示，就是让div1的display变成block。事件:简单的说就是用户操作onclickdiv1.style.display='block’的意思是把div1的style的display属性赋值为block就可显示。get Element By Id获取元素用 ID—>通过ID获取元素CSS样式实现：html代码实现：
复制链接

扫一扫