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

Question

只是想学习 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";
}

Answer 1

您可以使用 CSS 本身来代替 javascript 扩展：

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

将 1.5 更改为您想要缩放的大小。

Answer 2

问题在这里：

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

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

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

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

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

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

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

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

第三个（IMO 更好）选项是使用 CSS :hover.

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

How can I edit the style of an object on hover?

html

javascript

css

hover