onmouseover与onmouseout处理提示框

最新推荐文章于 2022-10-09 16:21:01 发布

Huangruxia

最新推荐文章于 2022-10-09 16:21:01 发布

阅读量1.8k

点赞数

分类专栏： js 文章标签：鼠标 onmouseover onmouseout

本文链接：https://blog.csdn.net/huang_ruxia/article/details/11544605

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：当鼠标移到目标元素时显示提示信息，当鼠标移开时提示信息隐藏。

首先，随便写个style:

<style>
#div1{ height:200px; width:200px; background:#ccc; display:none; 

border:2px solid #900;}
</style>

然后写下相关html：

<input type="checkbox"  οnmοuseοver="div1.style.display='block';" 

οnmοuseοut="div1.style.display='none';" />
<div id=div1 >这样可以看到吗？</div>

这样，就能实现原定目标了。很简单。

但是，我们真正需要的并不是这样不规范的代码。在之前的火狐浏览器中，当鼠标移到复选框的时候我们根本看不到提示信息，因为火狐不能识别οnmοuseοver="div1.style.display='block';"，不能执行更改block。当然随着浏览器的不断完善不断改进，刚才本女侠试了一下，在火狐居然也可以看到预期效果。好吧，但是我们不能降低对自身的要求。

最好是能把onmouseover系列写成function函数来管理。条理清晰，书写规范。以下为修改后的版本：

<!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=utf-8" 

/>
<title>无标题文档</title>
<style>
#div1 { height:200px; width:200px; background:#ccc; display:none;  

border:2px solid #900; color:#000;}
</style>
<script type="text/javascript">
     function MouseOver(){
	document.getElementById("div1").style.display="block";
}
     function MouseOut(){
	document.getElementById('div1').style.display="none";
}
</script>

<input type="checkbox"  οnmοuseοver="MouseOver()" οnmοuseοut="MouseOut()" />
<div id="div1">这样可以看到吗？</div>

瞬间有种高端大气上档次的感觉。。。

除了提示框之外，还能做换肤处理。通过onclick来调用更换css或者背景的函数即可。

Huangruxia

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
onmouseover与onmouseout处理提示框

目的：当鼠标移到目标元素时显示提示信息，当鼠标移开时提示信息隐藏。首先，随便写个style:#div1{ height:200px; width:200px; background:#ccc; display:none; border:2px solid #900;}然后写下相关html：<input type="checkbox" onmouseover="div1
复制链接

扫一扫

专栏目录