javascript - 鼠标悬停时看不到类更改

我正在用受Material Design启发的w3.css编写一些代码。我正在尝试制作一张卡，使鼠标悬停时阴影大小会发生变化。我正在使用的代码如下所示：

  <div class="w3-card-4"
  onMouseOver="this.style.className='w3-card-16';"
  onMouseOut="this.style.className='w3-card-4';">
    <a href="pages/gameoflife.html"> <img src="images/gameoflife.gif"></img> </a>
  </div>

每当我将鼠标悬停在上面时，外观都不会改变。我可以看到类名称已更改，因为如果添加console.log(this.style.className)，它将打印正确的类。为什么看不到更改？

最佳答案

className属性适用于Element，而不适用于其style属性：

ELEMENT.className = "..."，而不是：ELEMENT.style.className = "..."

<div class="w3-card-4"
     onMouseOver="this.className='w3-card-16';"
     onMouseOut="this.className='w3-card-4';">
    <a href="pages/gameoflife.html"> <img src="images/gameoflife.gif"></img> </a>
</div>

关于javascript - 鼠标悬停时看不到类更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34385651/