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

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

<!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>

 

posted @ 2019-07-29 11:02  半夏琉璃空人心  阅读(613)  评论(0)  编辑  收藏  举报