我已經在angular-js中爲鼠標懸停文本編寫了代碼。我需要懸停文本出現在鼠標指針所在的位置。
但不幸的是沒有發生。懸停文本仍然固定在特定位置,並且google-Chrome開發人員工具顯示錯誤Uncaught TypeError: Cannot read property 'style' of null
即使我已指定id
中的div
標記,但它未檢測到id
屬性。angularjs:鼠標懸停文本沒有出現在鼠標(x,y)位置
這裏是下面的代碼:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script>
var tooltipSpan = document.getElementById("demo");
window.onmouseover = function (e) {
var x = e.clientX,
y = e.clientY;
tooltipSpan.style.top = (y + 20) + 'px';
tooltipSpan.style.left = (x + 20) + 'px';
};
</script>
</head>
<body ng-app="">
<div id="demo" ng-init="tooltip=false" ng-show="tooltip" style="border: 1px solid black;width: 230px;height: 40px;background-color: gray;color: white;z-index: 1;position: fixed;">Hi..Welcome In Angular JS World.</div>
<table border=1>
<tr><th>col1</th><th>col2</th></tr>
<tr><td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 1</td> <td>data 2</td></tr>
<tr><td>data 1</td> <td ng-mouseover="tooltip=true" ng-mouseleave="tooltip=false">data 2</td></tr>
</table>
</body>
</html>
謝謝@sainid工作:) – aiman