HTML-鼠标移动到元素上时高亮文本

最新推荐文章于 2025-06-27 14:40:42 发布

月尽天明_

最新推荐文章于 2025-06-27 14:40:42 发布

阅读量9.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： WEB 文章标签： html

本文链接：https://blog.youkuaiyun.com/huiyanshizhu/article/details/75905336

WEB 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用HTML的onmousemove和onmouseleave事件来实现在鼠标移到元素上时高亮显示文本，以及鼠标离开时恢复原始状态的效果。特别地，文中提到了当元素有背景图片时，使用hover伪类可能更合适，以避免影响背景图片的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

onmousemove: 鼠标移动到元素时触发
onmouseleave: 鼠标离开元素时触发

#index.html
<<head><head>
    <meta charset="utf-8">
    <script type="text/javascript" src="index.js">
    </script>
    <style>
        p {
            background-image: url('test.png');
        }
    </style>
</head>
<body>
    <p class='background' onmousemove="changeColor(this)" onmouseleave="changeColorBack(this)">The first paragraph</p>
    <p class="background" onmousemove="changeColor(this)" onmouseleave="changeColorBack(this)">The second paragraph</p>
    <p class="background" onmousemove="changeColor(this)" onmouseleave="changeColorBack(this)">The third paragraph</p>
</body>
<footer></footer>

#index.js
function changeColor(x) {
    x.style.background = 'yellow';
}
function changeColorBack(x) {
    x.style.background = 'white';
}

效果如图，当鼠标移动到元素上时，改变背景颜色为黄色；鼠标离开时，背景恢复为白色：
这里写图片描述

hover(更新：2017-08-04)
上述方法存在一个问题，当有背景图片时，触发效果后会破坏背景图片，使用hover不会

<!DOCTYPE html>
<html>
<header>
<style>
    p:hover {
    background: yellow;
    }
    body {
        background-image: url('hello_python.png');
    }
</style>
</header>
<body>
    <p>The first paragraph</p>
    <p>The second paragraph</p>
    <p>The third paragraph</p>
</body>
</html>