4

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

onmouseover 会立即更改站点徽标图像，我想知道是否可以在不使用 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，我还没有很好地掌握它。

谢谢

4

5 回答 5

3

您可以使用纯 CSS3。

.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.5;
  }

示例取自这里。还有很多其他的可能性，但这应该是一个好的开始。

但是，它只适用于支持 CSS3 过渡的浏览器。尤其是 Internet Explorer迟到了，仍然有很多人在使用它（以及不支持 CSS3 的其他浏览器的旧版本）。

如果你想要一个真正的跨浏览器解决方案，最大限度地支持旧版本，那么 JQuery 确实是要走的路。不管看起来多么困难，花在学习淡化上的时间真的会得到回报。几乎可以肯定，学习如何做一点 JQuery 比做一个等效的纯 JavaScript 解决方案更容易，后者将提供与 JQuery 免费提供的相同的跨浏览器兼容性。

于 2012-10-23T21:35:02.437 回答
3

使用 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/ ​</p>

于 2012-10-23T21:35:41.460 回答
1

理想情况下，只使用 CSS 过渡和:hover选择器，完全不使用 JS，comme ça。

于 2012-10-23T21:35:00.460 回答
0

学习 jQuery。我保证它会让你在长期（和短期）中快乐。话虽这么说，一旦你了解了 jQuery，就回到 vanilla js 中，这样你才能真正理解它是如何工作的。

例如，您在 jquery 中的问题很简单：

$(function() {
    $('a').fadeOut();
    $('a').attr('src', '{new image path}');
    $('a').fadeIn();
});
于 2012-10-23T21:31:43.910 回答
0

工作示例，只需在同一目录中提供 image1.jpg 和 image2.jpg：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js" type="text/javascript"></script>
<script>
$(function() {

$('img').mouseenter(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('on'));
    $(this).fadeIn();
  });
});

$('img').mouseleave(function(){
  $(this).fadeOut('fast', function(){
    $(this).attr('src', $(this).data('off'));
    $(this).fadeIn();
  });
});


});

</script>

<img width="100" height="100" src="image1.jpg" data-on="image2.jpg" data-off="image1.jpg">
于 2012-10-23T21:53:36.090 回答