2022-06-22 11:39:44

一、css样式实现

1.xxx:hover

只能生成css可以控制的样式效果

<style>
    div:hover{
       color:red;
    }
</style>

二、js实现

1.moseover(鼠标悬浮)

1）能修改样式，同时修改DOM中的内容

<script>
    let sons = document.getElementsByClassName("son");

    let borderWidth = 4;
    for (let i = 0; i < sons.length; i++) {
        sons[i].addEventListener("mouseover", (e) => {
            console.log("mouseover:", e, e.target.style)
            e.target.style.borderWidth = borderWidth + i + "px";
            e.target.innerHTML="mouseover"+i+1;
        })
        sons[i].addEventListener("mouseout", (e) => {
            console.log("mouseout:", e, e.target.style)
            e.target.style.borderWidth = "none";
            e.target.innerHTML =  (i + 1)
        })
    }

</script>

2）优化：事件委派，减少点击事件的注册，减少内存占用

用e.target中的 className 或 tagName 或 id 判断是否时需要更改样式、内容的元素

<script>
    let parent = document.getElementsByClassName("container");
    let borderWidth = 8;

    // 事件委托：只在父元素上注册事件,减少内存占用
    parent[0].addEventListener("mouseover", (e) => {
        console.log("e", e, e.target)
        if (e.target.className == "son") {
            e.target.style.boxSizing = "border-box"
            console.log("son:", e.target.className)
            e.target.style.borderWidth = borderWidth + "px";
            e.target.style.padding = 20 + "px";
            e.target.innerHTML = "mouseover" + (borderWidth)
        }
    })
</script>

3）完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框变化不影响布局</title>
    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
        }
        .son {
            height: 400px;
            width: 300px;
            background-color: skyblue;
            margin: 5px;
            /* border: 3px solid transparent; */
            /* box-sizing: border-box; */
        }

        .son:hover {
            border: 6px solid #894;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="son">1</div>
        <div class="son">2</div>
        <div class="son">3</div>
        <div class="son">4</div>
        <div class="son">5</div>
        <div class="son">6</div>
        <div class="son">7</div>
        <div class="son">8</div>
    </div>
</body>
<script>
    // let sons = document.getElementsByClassName("son");

    // let borderWidth = 4;
    // // object
    // console.log("sonsType:", typeof (sons))
    // for (let i = 0; i < sons.length; i++) {
    //     sons[i].addEventListener("mouseover", (e) => {
    //         e.target.style.boxSizing = "border-box"
    //         console.log("mouseover:", e, e.target.style)
    //         e.target.style.borderWidth = borderWidth + i + "px";
    //         e.target.innerHTML = "mouseover" + (i + 1)
    //     })
    //     sons[i].addEventListener("mouseout", (e) => {
    //         console.log("mouseout:", e, e.target.style)
    //         e.target.style.borderWidth = "none";
    //         e.target.innerHTML = (i + 1)
    //     })
    // }

    let parent = document.getElementsByClassName("container");
    let borderWidth = 8;

    // 事件委托：只在父元素上注册事件,减少内存占用
    parent[0].addEventListener("mouseover", (e) => {
        console.log("e", e, e.target)
        if (e.target.className == "son") {
            //加边框不会影响布局
            e.target.style.boxSizing = "border-box"
            console.log("son:", e.target.className)
            e.target.style.borderWidth = borderWidth + "px";
            e.target.style.padding = 20 + "px";
            e.target.innerHTML = "mouseover" + (borderWidth)
        }
    })
</script>

</html>

2.mouseout(鼠标移除调用的事件)

同mouseover,不再赘述！

希望对你有帮助！

如有错误，欢迎指正！

非常感谢!