search

Home >Web Front-end >JS Tutorial >js method to implement a prompt layer when the mouse moves to the link text_javascript skills

js method to implement a prompt layer when the mouse moves to the link text_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:59:501225browse

The example in this article describes how to use js to implement a prompt layer when the mouse is moved to the link text. Share it with everyone for your reference. The specific analysis is as follows:

Here is the effect of moving the mouse over the link text and popping up a defined DIV layer. In this layer, you can add information corresponding to this link, which becomes an information prompt window. This effect can be seen on Taobao and Sina, which is very practical. 

<!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 type="text/css">
<!--
#box{
display:none;
width: 315px;
height: 180px; 
background:#CCC;
border:1px solid #333;
padding:12px;
text-align:center;
}
-->
</style>
<script type="text/javascript" language="javascript" >
<!--
function display(){
document.getElementById("box").style.display="block"; 
}
function disappear(){
document.getElementById("box").style.display="none"; 
}
-->
</script>
</head>
<body>
<a href="#" onmouseover="display()" onmouseout="disappear()">
鼠标放到这儿！
</a>
<div id="box" onmouseover="display()" onmouseout="disappear()">
效果不错吧？这里面你可以设置一张图片，也可以是一段文字，
而且源代码很简单哦！
</div>
</body>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of using Location in JS_javascript skillsNext article：Detailed explanation of using Location in JS_javascript skills

Related articles

See more