在 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.