使用js的时候，统一使用双引号，然后通过反斜杠进行转义
①如果同时使用单引号、和双引号的情况下容易出现问题，导致标签中表示的事件不能调用，
②导致由于标签没有封口而出现样式布局错误
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>JS教程:鼠标悬停时显示文字或显示图片</title> 6 <script type="text/javascript"> 7 function showPic(sUrl) { 8 alert(sUrl); 9 var x, y; 10 x = event.clientX; 11 y = event.clientY; 12 document.getElementById("Layer1").style.left = (x - 60).toString() + "px"; 13 document.getElementById("Layer1").style.top = (y - 100).toString() + "px"; 14 document.getElementById("Layer1").innerHTML = "<img src="" + sUrl + "">"; 15 document.getElementById("Layer1").style.display = "block"; 16 } 17 function hiddenPic() { 18 document.getElementById("Layer1").innerHTML = ""; 19 document.getElementById("Layer1").style.display = "none"; 20 } 21 </script> 22 </head> 23 <body> 24 <div style="position: relative"> 25 <div id="Layer1" style="display: none; position: absolute; z-index: 1;"></div> 26 </div> 27 <img src="pic/QQ截图20150721092858.jpg" onmouseout="hiddenPic()" onmousemove="showPic(this.src)" title="wowowowo" style="margin-top: 300px" /> 28 <div onmouseout="hiddenPic()" onmousemove="showPic('pic/QQ截图20150721092858.jpg')" style="margin-top: 300px; 200px; height: 100px; background-color: blue" /> 29 </body> 30 </html>
对于上述代码，如果ShowPic中的内容，没有使用单引号括起来的情况下，那么将会导致无法调用showPic，因为如果不使用单引号的情况下就会导致将其解析为表达式
注意其中的onmousemove和onmouseout事件的使用