在 hover 一個元素上創建高亮效果
[英]Create highlight effect on hover an element
問題描述
我嘗試對每個<a>元素進行突出顯示效果，而我在每個div元素上使用 hover 但它不起作用並且控制台顯示此錯誤
“未捕獲的類型錯誤：無法在 highlight_function 處設置未定義的屬性‘背景’”
function highlight_function () {document.getElementsByTagName("a").style.background="#80ff00"};
document.getElementsByTagName("div").addEventListener("mouseover",highlight_function())
6 個解決方案
解決方案1
1 2021-03-22 09:38:12
您可以通過添加 CSS 來簡單地添加高亮效果或更改背景顏色，如下所示：
<:DOCTYPE html> <html> <head> <style> p:hover { background-color; green; } </style> </head> <body> <p id="hometown">I live in Pakistan</p> </body> </html>
解決方案2
0 2021-03-22 09:35:57
我認為這是因為document.getElementsByTagName("a")是一個數組，並且您試圖在數組而不是每個元素中設置樣式。
您應該創建一個 for 循環來更改每個元素的背景樣式，或者添加一個樣式標簽，如a {background: "#80ff00"} 。
但是你不能像這樣為數組定義樣式
解決方案3
0 2021-03-22 09:38:10
索引.html
<html lang="en">
<head>
</head>
<body>
<div>
<a href="#"> something</a>
</div>
</body>
<script>
function highlight_function() {
const a = document.querySelector('a');
a.style.background = "#80ff00"
}
const div = document.querySelector('div');
div.addEventListener('mouseover', highlight_function);
</script>
</html>
解決方案4
0 2021-03-22 09:38:20
我認為背景屬性不適用於<a>標記。 嘗試在您的 function 中執行此操作：
document.getElementsByTagName("a").style.color="#80ff00"
解決方案5
0 2021-03-22 09:42:00
這是你可以試試這個
function highlight_function() { document.getElementById("a").style.backgroundColor = "#80ff00"; };
<div id="div"> <a id="a" onmouseover="highlight_function()">Hell</a> </div>
解決方案6
0 2021-03-22 09:43:28
當您進行此調用時document.getElementsByTagName("a")它將返回給您 html 元素的集合，因此沒有樣式屬性可以用於循環它
for(var a of document.getElementsByTagName("a")) {
a.style.background="#80ff00";
}
在同一元素上的OnMouseOver和OnMouseOut僅使用JavaScript創建懸停效果？
[英]OnMouseOver and OnMouseOut on the same element to create hover effect using javascript only?
如何將懸停效果添加到嵌套到懸停元素的元素？
[英]How to add the hover effect to an element that is nested to an element with hover?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.