嘗試寫了一個tooltip,不過不能實現,用mousemove tip的div的css隨着鼠標的移動而改變css,一直不能實現,tip的div一直在原先的地方,很奇怪
- <!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>
- <title></title>
- <style type="text/css">
- .hoverme{
- width:200px;
- height:150px;
- border:1px solid blue;
- }
- </style>
- <script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
- </head>
- <body>
- <div id="tip" style="display:none;">Ya! I am a tooltip!</div>
- <div class="hoverme">Hover me for a tooltip.</div>
- </body>
- <script type="text/javascript">
- $(document).ready(function(){
- $('.hoverme').hover(function(){
- $('#tip').fadeIn('slow');
- },
- function()
- {
- $('#tip').fadeOut('slow');
- });
- $('.hoverme').mousemove(function(e){
- var topPosition=e.pageY+5;
- var leftPosition=e.pageX+5;
- $('#tip').css({
- 'top':topPosition+'px',
- 'left':leftPosition+'px'
- });
- });
- });
- </script>
- </html>