如何编辑悬停对象的样式?

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

问题就在这里:

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。

Answer 2

与其使用javascript来展开，不如使用CSS本身:

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

把1.5改成你想要的大小