javascript 没有jQuery的鼠标悬停过渡效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13039570/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
onmouseover transition effect without jQuery
提问by Michael McVerry
I use onmouseover for hover effects of the main site logo on my dev site http://www.new.ianroyal.co.
我使用 onmouseover 在我的开发站点http://www.new.ianroyal.co上实现主站点徽标的悬停效果。
onmouseover changes the site logo image instantaneously, I was wondering if I could apply a transition effect (fade in, or just generally slow down the transition speed) without using jQuery.
onmouseover 立即更改站点徽标图像，我想知道是否可以在不使用 jQuery 的情况下应用过渡效果（淡入，或者只是通常减慢过渡速度）。
Here is my code:
这是我的代码：
<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>I've searched and searched but it seems the only solultions are with jQuery which I don't have a good enough grasp of yet.
我已经搜索并搜索过，但似乎唯一的解决方案是使用 jQuery，但我对它的掌握还不够好。
Thank you
谢谢
采纳答案by elclanrs
Use css3 transitions.
使用 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)
}
Old browsers will simply not animate the transition.
旧浏览器根本不会为过渡设置动画。
回答by Holf
You can use pure CSS3.
您可以使用纯 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;
}
Example taken from here. There are lots of other possibilities but that should be a good start.
示例取自此处。还有很多其他的可能性，但这应该是一个好的开始。
However, it will only work with browsers which support CSS3 Transitions. Internet Explorer especially is late to the game, and there are still lots of people out there using it(and older versions of other browsers which don't support CSS3).
但是，它仅适用于支持 CSS3 转换的浏览器。Internet Explorer 尤其迟到，而且仍然有很多人在使用它（以及不支持 CSS3 的其他浏览器的旧版本）。
If you want a truly cross-browser solution which maximises support for older versions then JQuery really is the way to go. However hard it seems, the time invested in learning to do a fade will really pay off. And it will almost certainly be easier to learn how to do a bit of JQuery than to do an equivalent pure JavaScript solution which would give the same cross-browser compatibility that JQuery gives you for free.
如果您想要一个真正的跨浏览器解决方案，最大限度地支持旧版本，那么 JQuery 确实是要走的路。无论看起来多么艰难，花在学习淡化上的时间真的会得到回报。而且几乎可以肯定，学习如何使用一些 JQuery 比使用等效的纯 JavaScript 解决方案更容易，后者将提供与 JQuery 免费提供的相同的跨浏览器兼容性。
回答by XML
回答by Reflective
Working example, just provide image1.jpg and image2.jpg in same directory:
工作示例，只需在同一目录中提供 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">
回答by AndyL
Learn jQuery. I promise it will make you happy in the long (and short) run. That being said, once you know jQuery, dive back into vanilla js so that you really understand how it works.
学习jQuery。我保证它会让你在长期（和短期）快乐。话虽如此，一旦您了解了 jQuery，就可以回到原版 js 中，这样您才能真正了解它的工作原理。
For example, your problem in jquery would be as simple as:
例如，您在 jquery 中的问题很简单：
$(function() {
$('a').fadeOut();
$('a').attr('src', '{new image path}');
$('a').fadeIn();
});
