javascript - 没有jQuery的onmouseover过渡效果

Question

我在我的开发站点上使用 onmouseover 来实现主站点 Logo 的悬停效果 http://www.new.ianroyal.co .

onmouseover 会立即更改站点 Logo 图像，我想知道是否可以在不使用 jQuery 的情况下应用过渡效果(淡入，或者只是通常减慢过渡速度)。

这是我的代码:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" ONMOUSEOVER='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo.png" ' ONMOUSEOUT='ian.src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png"'>
  <img src="http://new.ianroyal.co/wp-content/themes/twentytwelve/images/IN-Logo1.png" NAME="ian" class="header-image" alt="Ian Nelson" />
</a>

我搜索了又搜索，但似乎唯一的解决方案是使用 jQuery，我还没有充分掌握它。

谢谢

Answer 1

使用 css3 转换。

div {
    height: 100px;
    width: 100px;
    background: url(image1.png) no-repeat;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
}

div:hover {
    background-image: url(image2.png)
}

旧浏览器根本不会动画转换。

演示: http://jsfiddle.net/elclanrs/jg7G3/