鼠标移入和鼠标移出的提示，和样式的转换

鼠标事件与样式切换技巧

最新推荐文章于 2021-11-03 18:15:58 发布

转载最新推荐文章于 2021-11-03 18:15:58 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1322957664qqcom/p/11262744.html

本文介绍了如何使用HTML和JavaScript实现鼠标移入和移出时显示提示信息，以及如何通过鼠标事件改变元素的样式。利用onmouseover和onmouseout事件，可以轻松地为网页元素添加交互效果。

鼠标移入和鼠标移出的提示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #DIV{
            width: 100px;
            height: 70px;
            border: 1px solid #aaaa22;
            display: none;
        }
    </style>
</head>
<body>
<lable onmouseover="document.getElementById('DIV').style.display='block';"
       onmouseout="document.getElementById('DIV').style.display='none';">
<input type="checkbox" >自动登录</lable>
<div id="DIV">选择需要谨慎</div>
</body>
</html>

注：lable标签的主要作用就是用来做一个框，鼠标进入这个框，就会显示提示内容，如果没有lable标签，只有当鼠标在按钮上时才显示提示内容。

鼠标移入和鼠标移出的样式的转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 70px;
            border: 1px solid #aaaa22;
        }
        .box1{
            width: 200px;
            height: 100px;
            border: 1px solid red;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="DIV" onmouseover="document.getElementById('DIV').className='box1';"
     onmouseout="document.getElementById('DIV').className='';"></div>

</body>
</html>

转载于:https://www.cnblogs.com/1322957664qqcom/p/11262744.html