javascript - 鼠标悬停时类更改不可见

Question

受 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) 它会打印出正确的类。为什么更改不可见？

Answer 1

className 属性应用于元素，而不是其 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>