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

2019/11/10 53 網站技術 , 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
徵信社服務電話| 外遇疑雲| 阿宅來說徵信社故事| 如何手機監聽| 徵信社電話幾號| 徵信價目表費用| 抓姦在床蒐證| 台北立達徵信社| 免費法律諮詢專線| 馭夫術手段| 設計離婚服務| 男友感情挽回| 包二奶氾濫| 抓小三蒐證| 反跟蹤可行嗎| 尋人查址高手| 夫妻協議離婚| 委託外遇蒐證| 丈夫外遇偷腥| 名人外遇新聞| 立案專業徵信社| 婚前調查協助| 離婚扶養費| 汽車定位追蹤| 危險徵信社任務| 免費法律諮詢| 國際徵信公司|
【業界首推立達徵信FB