javaScript之鼠标操作（onmouseover）

最新推荐文章于 2023-11-14 21:19:11 发布

可芭乐

最新推荐文章于 2023-11-14 21:19:11 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript基础文章标签： javascript 鼠标 onmouseove

本文链接：https://blog.csdn.net/a839371666/article/details/52780853

版权

JavaScript基础专栏收录该内容

37 篇文章 0 订阅

订阅专栏

javaScript之鼠标操作（onmouseover）

<input type="checkbox" onmouseover="alert('a')" />

onmouseover：当鼠标移动到checkbox这个元素上时，会发生““里面的指令
alert(‘a’):弹出提示窗，内容为a

<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" />

当鼠标移到“checkbox”时，元素div1的style中的display变成block

onmouseout="document.getElementById('div1').style.display='none';"

当鼠标移出checkbox这个元素时，元素div1的style中的display变成none

记住密码提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    #div1 {
        width: 100px;
        height: 50px;
        background: #999;
        border: 1px solid #000;
        display: none;
    }
</style>
<body>
    <label onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"><input type="checkbox" />自动登录</label>
    <div id="div1">缤纷维生素软糖</div>
</body>
</html>

换class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    div {
        width: 100px;
        height: 100px;
        background: red;
    }
    .box {
        width: 200px;
        height: 200px;
        background: green;
    }
</style>
<body>
    <div id="div1" onmouseover="document.getElementById('div1').className='box';"onmouseout="document.getElementById('div1').className='';"></div>
</body>
</html>

网页换肤

<input id="btn1" type="button" value="皮肤1" onclick="document.getElementById('link1').href='css1.css';">

当点击“皮肤1”的时候css样式使用css1的样式

JS中函数的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
    #div1 {
        width: 100px;
        height: 100px;
        background: red;
    }
</style>
<script type="text/javascript">
    function toGreen(){
        var oDiv1=document.getElementById('div1')；
        oDiv1.style.width='200px';
        oDiv1.style.height='200px';
        oDiv1.style.background='green';
    }
    function toRed(){
        var oDiv1=document.getElementById('div1')；
        oDiv1.style.width='100px';
        oDiv1.style.height='100px';
        oDiv1.style.background='red';
    }
</script>
</head>
<body>
    <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
</body>
</html>

可芭乐

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
javaScript之鼠标操作（onmouseover）

javaScript之鼠标操作（onmouseover）<input type="checkbox" onmouseover="alert('a')" />onmouseover：当鼠标移动到checkbox这个元素上时，会发生““里面的指令 alert(‘a’):弹出提示窗，内容为a<input type="checkbox" onmouseover="document.getElementBy
复制链接

扫一扫