zoukankan      html  css  js  c++  java
  • 鼠标移入和鼠标移出的提示,和样式的转换

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

    <!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>
  • 相关阅读:
    前端每周学习分享--第7期
    前端每周学习分享--第5期
    博客迁移声明
    使用Angular CLI创建Angular 2项目
    使用Gulp压缩CSS/JS
    [JS]继承方式总结
    [JS]算法总结
    圆梦之旅 – 日本(一)攻略篇
    新年畅想
    [CSS]三栏自适应布局
  • 原文地址:https://www.cnblogs.com/1322957664qqcom/p/11262744.html
Copyright © 2011-2022 走看看