javascript 在悬停元素时创建高亮效果

lqfhib0f 于 2023-08-02 发布在 Java

关注(0)|答案(6)|浏览(117)

我尝试在每个<a>元素上做高亮效果，同时我在每个div元素上悬停，但它不起作用，控制台显示此错误
“未捕获的类型错误：无法在highlight_function处设置undefined的属性“background””

的数据

function highlight_function() {
  document.getElementsByTagName("a").style.background = "#80ff00"
};

document.getElementsByTagName("div").addEventListener("mouseover", highlight_function())

字符串

JavaScript

来源：https://stackoverflow.com/questions/66743315/create-highlight-effect-on-hover-an-element

6条答案

按热度按时间

rxztt3cl1#

我认为这是因为document.getElementsByTagName("a")是一个数组，你试图在数组上设置样式，而不是在每个元素中。
你应该创建一个for循环来改变每个元素的背景样式，或者添加一个像a {background: "#80ff00"}这样的样式标签。
但是你不能像这样定义数组的样式

赞(0）回复(0）举报 2023-08-02

bcs8qyzn2#

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

字符串

赞(0）回复(0）举报 2023-08-02

juud5qan3#

我认为background属性在<a>标签上不起作用。尝试在你的函数中这样做：

document.getElementsByTagName("a").style.color="#80ff00"

字符串

赞(0）回复(0）举报 2023-08-02

amrnrhlw4#

当你调用document.getElementsByTagName("a")的时候，它会返回一个html元素的集合，所以你不能使用style属性来循环它

for(var a of document.getElementsByTagName("a")) {
  a.style.background="#80ff00";
}

字符串

赞(0）回复(0）举报 2023-08-02

brqmpdu15#

这个你可以试试

function highlight_function() {
  document.getElementById("a").style.backgroundColor = "#80ff00";
};

个字符

赞(0）回复(0）举报 2023-08-02

cygmwpex6#

您可以简单地添加高亮效果或通过添加CSS更改背景颜色，如下所示：

p:hover {
  background-color: green;
}

个字符

赞(0）回复(0）举报 2023-08-02

我来回答

javascript 在悬停元素时创建高亮效果

6条答案

相关问题

热门标签

最新问答