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

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

痴情的大象 · JavaScript 技术篇 - js ...· 昨天 ·

潇洒的硬币 · JS设置控件焦点- ...· 昨天 ·

冷静的毛豆 · [通用]JS移动端设置文本控件焦点- ...· 昨天 ·

小眼睛的灭火器 · js在一个文件中定义全局变量 ...· 2 天前 ·

逃跑的骆驼 · JS定义全局变量的方法 - CSDN文库· 2 天前 ·

慷慨的黑框眼镜 · I ...· 2 周前 ·

酷酷的金鱼 · GT ...· 3 周前 ·

英俊的大脸猫 · 疾电阿坤 - 萌娘百科万物皆可萌的百科全书· 1 月前 ·

纯真的丝瓜 · linux命令编译运行？ - 筋斗云· 2 月前 ·

沉稳的红薯 · 火焰纹章回声：另一位英雄王——游戏攻略汇总让 ...· 5 月前 ·

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

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

先来看看效果：

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

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

<!DOCTYPE html>
    <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>
    <div id="wrap">外DIV
        <div id="content">内部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>