请问高手,JavaScript中如何出现一个浮在文字上面的提示框?

请问高手,JavaScript中如何出现一个浮在文字上面的提示框?,第1张

简单的话,直接价格title属性就可以了,比如

。如果想定义这个提示框的样式,可以定义个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>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/7951095.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-11
下一篇 2023-04-11

发表评论

登录后才能评论

评论列表(0条)

保存