。如果想定义这个提示框的样式,可以定义个div将他的position设为absolute,display为none。然后给文字定义鼠标在上面的事件onmouseover在事件里将display设为block。再加上鼠标离开时的事件onmouseout,在事件里是display为none。
一、首先需要div布局:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js悬停</title>
<style type="text/css">
p {
width: 200px
height: 200px
background-color: skyblue
text-align: center
line-height: 200px
}
</style>
</head>
<body>
<p id="txt">我是一个DIV</p>
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
</body>
</html>
二、div实在的在开发工具里面的代码效果如下截图:
三、这段代码最主要的重点是如下:
<script type="text/javascript">
var txt = document.getElementById('txt')
txt.setAttribute("title","鼠标悬停了")
</script>
四、实际代码在浏览器的渲染如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<title>New Document </title>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="Author" content="笃行天下">
<meta name="Keywords" content="笃行天下">
<meta name="Description" content=" http://hi.baidu.com/duxing">
</head><body>
<input type=button value='左滚' onmouseover="leftRoll()" onmouseout="stopRoll()">
<marquee id="dodoRoll" width="30%">笃行天下_笃行天下_笃行天下_笃行天下_笃行天下</marquee>
<input type=button value='右滚' onmouseover="rightRoll()" onmouseout="stopRoll()"></body>
</html>
<script language="JavaScript">
<!--
document.getElementById("dodoRoll").stop()
function leftRoll()
{
document.getElementById("dodoRoll").direction="left"
document.getElementById("dodoRoll").start()
} function rightRoll()
{
document.getElementById("dodoRoll").direction="right"
document.getElementById("dodoRoll").start()
} function stopRoll()
{
document.getElementById("dodoRoll").stop()
}
//-->
</script>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)