JavaScript:游標碰觸子元素使父元素樣式變更

2019/11/10 1,162 0 網站技術 , HTML , CSS , JavaScript

開場我就先說,純 CSS 無法做到,因為 CSS 無法由子元素的 hover(游標碰觸)來變更父元素的樣式,所以就要用到萬能的 JavaScript!運用 DOM 的控制來做到 CSS 目前做不到的事情!這次主題為「游標碰觸子元素使父元素樣式變更」。

需要用到的 JavaScript 事件有兩個:mouseover 與 mouseout,前者代表游標碰觸到元素,後者代表游標沒有碰觸到元素。接著運用 addEventListener 添加監聽到子元素上,讓游標是否碰觸子元素來變動父元素的 CSS 樣式,這次我寫的範例是改變背景顏色,當然也可以改成變更文字顏色等,發揮創意就可以做到很多不同的樣式變化唷!說了這麼多,直接看原始碼比較快啦!


▲ 示範原始碼與執行結果局部截圖。

▲ CodePen 示範。

⌨️ 完整原始碼提供:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript:游標碰觸子元素使父元素樣式變更</title>
    <style>
        #Parent_element {
            width: 200px;
            background: #64a1df;
            padding: 20px;
            border-radius: 10px;
        }

        #Child_element {
            background: #DDD;
            margin: 5px;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
    <script>
        window.onload = function () {
            var PE = document.getElementById("Parent_element");
            var CE = document.getElementById("Child_element");

            // 游標碰觸子元素改變父元素背景顏色
            CE.addEventListener("mouseover", function (event) {
                PE.style.background = "#97afc8";
            }, false);

            // 游標離開子元素恢復父元素背景顏色
            CE.addEventListener("mouseout", function (event) {
                PE.style.background = "#64a1df";
            }, false);
        }
    </script>
</head>

<body>
    <div id="Parent_element">
        <b>父元素</b><br>
        父元素內文內文內文內文內文內文內文內文<br>
        父元素內文內文內文內文內文內文內文<br>
        父元素內文內文內文內文內文內文內文內文內文<br><br>
        <div id="Child_element">子元素</div>
    </div>
</body>

</html>
贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇