乖兔博客

乖兔 > CMS系统 > javascript > js实现鼠标移入div后改变内部其他子div样式

js实现鼠标移入div后改变内部其他子div样式

乖兔 更新于: 2020-12-03 分类:javascript

鼠标移入div触发其他div样式改变.jpeg

当鼠标移动到当前div的时候改变内部子div的样式或其他div样式,借助简单的js代码来实现。可以实现不同部位菜单导航的联动或前台不同部位的互动效果。

先来看看效果:

鼠标划入div后改变其他div样式.gif

js实现鼠标移入div后改变内部其他子div样式的全部html代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js实现鼠标移入div后改变内部其他子div样式</title>
</head>
<style>
    #wrap {
		margin:50px auto;
		padding:50px;
		text-align:center;
        width: 300px;
        height: 400px;
        border: 1px solid #CCC;
    }

    #content {
        width: 100px;
        height: 100px;
        border: 1px solid #CCC;
        margin: 50px;
		padding:50px;

    }
</style>
<body>
    <div id="wrap">外DIV
        <div id="content">内部DIV</div>
    </div>
    <script>
        let getcontent = document.getElementById("content");
        let getAbc = document.getElementById("wrap");
        getAbc.onmousemove = function () {
            getcontent.setAttribute("style", "background-color: red;");
        }
        getAbc.onmouseout = function () {
            getcontent.setAttribute("style", "background-color: while;");
        }
    </script>
</body>
</html>


打赏