開場我就先說，純 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
《上一篇》Medium：簡單、方便的撰文平台，初嘗試與初步分析 
《下一篇》Photoshop：星空與滿月細節同時出現在一張照片中、消除光暈修圖技巧！ 
留言區 / Comments
萌芽論壇