JQuery implements the dynamic prompt message box effect when the mouse moves over an element
- 2020-03-26 21:35:53
- OfStack
When the cursor moves over certain elements, a prompt box like tips pops up.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Dynamic prompt message box effect </title><base target="_blank" />
<style type="text/css">
* { font-family: monaco; }
div.item_keleyi_com { width:100px; height:50px; background-color: maroon; text-align:center; padding-top:25px; }
div#item_keleyi_com_1 { position: absolute; top: 50px; left: 50px;color: white; }
div#item_keleyi_com_2 { position: absolute; top: 500px; left: 0px;color: white; }
div#item_keleyi_com_3 { position: absolute; top: 0px; left: 500px;color: white; }
div#item_keleyi_com_4 { position: absolute; top: 500px; left: 500px; color: white;}
ul{ list-style:none;padding:0px 0px 0px 10px;}a{color:Blue;}
</style>
<link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/jqtexiao/2/stylesheets/jquery.tooltip/jquery.tooltip.css" type="text/css" />
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/2/javascripts/jquery.tooltip.js"></script>
<script type="text/javascript">
$j = jQuery.noConflict();
$j(document).ready(function(){
$j("div.item_kel"+"eyi_com").tooltip();
});
</script>
</head>
<body>
<div id="item_keleyi_com_1" class="item_keleyi_com">
KeLeYi
<div class="tooltip_description" style="display:none" title=" Details of koehler ">
The name of this website: ke leyi <br />
The website address: keleyi.com <br />
This site provides jQuery The special effects ,Javascript Instance, ASP.NET Source code and other content, welcome to visit! ke le The righteous
<br /> Tools: http://tool.keleyi.com
<br /> Search site content: http://so.keleyi.com
</div>
</div>
<div id="item_keleyi_com_2" class="item_keleyi_com">
jQuery
<div class="tooltip_description" style="display:none" title="jQuery introduce ">
Web site: http://keleyi.com/menu/jquery/
<br /> There are many on the Internet jQuery The special effects and knowledge are welcome to visit.
jQuery Implement the separation of script and page <br />
Save developer learning time <br />
let JavaScript Programming gets interesting <br /><br /><br />
For more information visit: http://so.keleyi.com/ <br />
Search: jQuery Advantages and disadvantages
</div>
</div>
<div id="item_keleyi_com_3" class="item_keleyi_com">
HTML5
<div class="tooltip_description" style="display:none" title="HTML5 introduce ">
HTML5 The development of more and more mature, a lot of applications have gradually appeared in your and my daily life, not only the traditional website interaction Flash Gradually be HTML5 The technology replaces, and more importantly can be passed through HTML5 The technology to develop cross-platform mobile software, many developers feel very excited! <br />
In a general sense HTML5 Contains the HTML , CSS and JavaScript Three parts, not just HTML Part of it, CSS 3 and JavaScript There are also many innovations that make the entire web application more colorful. <br />
keleyi.com
</div>
</div>
<div id="item_keleyi_com_4" class="item_keleyi_com">
Javascript
<div class="tooltip_description" style="display:none" title="Javascript introduce ">
in javascript , the scope of a variable is global ( window Object) scope and function call scope. <br />
js Gets the external network of the machine / wan ip address <br /><br /><br />
For more information visit: http://so.keleyi.com/ <br />
Search: Javascript scope <br />
js Gets the external network of the machine / wan ip address <br />
</div>
</div>
<div style="clear:both;margin-top:130px;width:960px;">
<h3>jQuery Dynamic prompt message box effect </h3>
<p> Please move your cursor over the four rectangles. Applicable browser: IE8 , 360 , FireFox , Chrome , Safari , Opera , maxthon, sogou, window of the world . <br /> Source: <a href="http://keleyi.com/"> KeLeYi </a> <a href="http://keleyi.com/a/bjac/hxv86dyi.htm"> The original </a></p>
<ul>
<li><a href="http://keleyi.com/a/bjac/kjsrt3b0.htm">jQuery AJAX</a></li>
<li><a href="http://keleyi.com/a/bjac/182di68b.htm"> Navigation style </a></li>
<li><a href="http://keleyi.com/a/bjac/mt97p5y9.htm"> The side navigation </a></li>
<li><a href="http://keleyi.com/dev/3068696139522ae4.htm"> The tree menu </a></li>
<li><a href="http://keleyi.com/a/bjac/ck9atu5j.htm">jquery ui Foldable accordion menu </a></li><li><a href="http://keleyi.com/a/bjac/r55i6646.htm">jQuery :even Even selector </a></li><li><a href="http://keleyi.com/a/bjac/9rf4gedp.htm"> unpack div the jQuery code </a></li><li><a href="http://keleyi.com/a/bjac/mnmpm4bv.htm">jQuery Example of picture revolving lamp </a></li>
</ul>
</div>
</body>
</html>