（4）鼠标移动某个区域时候显示内容，移出某个区域的时候隐藏某个内容

最新推荐文章于 2023-07-13 22:02:59 发布

无人与我共黄昏

最新推荐文章于 2023-07-13 22:02:59 发布

阅读量7k

点赞数

分类专栏： JavaScript案例解析

本文链接：https://blog.youkuaiyun.com/Xuan6251237011/article/details/26880045

版权

JavaScript案例解析同时被 2 个专栏收录

42 篇文章 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

JavaScript代码

42 篇文章

订阅专栏

本文介绍了一个交互设计技巧，当鼠标移到特定区域（如checkbox）时，会显示相关文本信息；而当鼠标移出该区域，文本则会自动隐藏。此效果提升了用户体验。

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

<!DOCTYPE HTML>
<!--
    1、当鼠标移入input的时候，让div1显示，当鼠标移除input的时候，让div1隐藏
    2、事件：简单说是代表用户的操作
    3、让div1显示出来其实就是将div1的display设为block
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
	width:200px;
	height:100px;
	background:#ccc;
	boder:1px solid;
	display:none;

}
</style>


</head>
<body>
	<input type="checkbox"  οnmοuseοver="document.getElementById('div1').style.display='block'" οnmοuseοut="document.getElementById('div1').style.display='none'" />
<!--将id为div1的style中的display设为block；为了使浏览器兼容，使用document.getElementById('div1&#

了解本专栏