Javascript>> onmouseover用法

最新推荐文章于 2023-07-05 23:37:25 发布

原创最新推荐文章于 2023-07-05 23:37:25 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

20 篇文章

订阅专栏

本文提供了一个简单的HTML页面示例，展示了如何使用JavaScript为页面元素添加鼠标悬停和离开的交互效果。通过修改内联HTML内容来反馈用户的鼠标操作。

<!DOCTYPE html>
<html>
<head>
<title>Window Title</title>

</head>
<body>
 
<p>Test your mouse on me!</p>
<script>

const p = document.querySelector('p');
p.onmouseover = logMouseOver;
p.onmouseout = logMouseOut;

function logMouseOver() {
  p.innerHTML = 'Your mouse is over me.';
}

function logMouseOut() {
  p.innerHTML = 'Your mouse is not over me.';
}

</script>
</body>
</html>