Javascript 鼠标悬停时类更改不可见

我正在用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.className=“…”
，而不是：
ELEMENT.style.className=“…”

属性
className
适用于元素，而不是其
样式
属性：

ELEMENT.className=“…”
，而不是：
ELEMENT.style.className=“…”


OK工作正常。谢谢！好的，很好用。谢谢！
<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>