如何在悬停时编辑对象的样式？答案

【问题标题】：How can I edit the style of an object on hover?如何在悬停时编辑对象的样式？
【发布时间】：2015-08-19 06:50:55
【问题描述】：

只是尝试学习 javascript，现在尝试让我的内容（此时只是一个红框）在悬停时展开。不要看到我做错了什么。非常感谢您的帮助。

我的html：

<div class="content" onmouseover="expand()"></div>

我的 CSS：

 .content
    {
      width:100px;
      height:100px;
      background-color:red;
      margin:auto;
      position:absolute;
      top:0;
      right:0;
      left:0;
      bottom:0;
    }

我的javascript：

function expand()
{
  var content = document.getElementsByClassName("content");
  content.style.width = "200px";
}

【问题讨论】：

document.getElementsByClassName("content") 不返回单个元素，而是返回 HTMLCollection。你必须从中挑选一个特定的元素。
非常感谢@HovercraftFullOfEels 语言新手，非常感谢您的建议
@LynnEugeniaEspinoza 这与您的语法无关。这是关于此页面上的分类。同样，如果您想要您的解决方案，您应该确保其他人能够真正找到您的问题。
您好，欢迎来到 Stack Overflow！当你发布这样的问题时，请包括你的代码的实际行为——当你运行它时，发生了什么？控制台有错误吗？
@Xufox 我该怎么做？只使用 getElementById 会是更好的解决方案吗？

标签： javascript html css hover

【解决方案1】：

问题就在这里：

var content = document.getElementsByClassName("content");

因为getElementsByClassName 返回一个 HTMLCollection。（有关其工作原理的更多信息，请查看链接中的信息）。

快速解决方法是从结果中检索第一个元素：

var content = document.getElementsByClassName("content")[0];

但这仅适用于具有此类的第一个 DOM 元素，对于其他元素，它们将被简单地忽略。

另一种解决方案可能是使用this 将当前元素传递给函数，然后相应地更新元素的样式。

<div class="content" onmouseover="expand(this)"></div>

function expand(elem) {
    elem.style.width = "200px";
}

第三种（和 IMO 更好）选项是使用 CSS :hover。

【讨论】：

非常感谢 Luiggi 的解决方案！
供将来参考-如果我想要一个元素数组来执行相同的功能，我该怎么做？如果要求太多，请见谅
@LynnEugeniaEspinoza 使用for 循环并尽可能更改数组中的每个元素。
@LynnEugeniaEspinoza 将类似数组的集合转换为真正的数组的常用方法是使用Array.prototype.slice：[].slice.call(document.getElementsByClassName("content")) 将为您提供真正的元素数组。

【解决方案2】：

你可以使用 CSS 本身而不是使用 javascript 来扩展：

.content:hover {
    transform: scale(1.5);
}

将 1.5 更改为您想要缩放的程度。

【讨论】：

谢谢，但我想学习如何在 Javascript 中这样做以更好地学习语言。还可以在父元素或另一个元素悬停时使另一个对象展开。