javascript - 悬停时平滑过渡

Question

我一直在努力寻找一种方法来改变这个 <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"通过使用 :hover有一张名为 repair_h.svg 的图片.我最初做的是放置一个 :hover在 #repair像这样#repair :hover并给予维修 background-image:url但这没有用，我认为有几个原因。

那是我最初的过程...因为那行不通，我对如何正确实现这一点进行了一些研究，并找到了一种使用 JS 实现它的方法。这比我正在研究的其他一些 css 和 html 解决方案要简单得多。

使用 JS 最终非常适合我需要完成的工作，尽管我想添加其中的一部分，但我不太确定如何去做。

我想在悬停时在图像之间添加平滑过渡。

链接到我当前的构建 http://kapena.github.io/pp_web/ 我在这里工作的图标叫做维修服务

HTML

  <li> 
   <a href="#">
    <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
     onmouseover="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg'" 
     onmouseout="this.src='http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg'" border="0" alt="About Plumbing Repairs in Honolulu Hawaii">
    </img>
   </a>
 </li>

JS

function hover(element) {
    element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg');
}

function unhover(element) {
    element.setAttribute('src', 'http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg');

此外，如果你们有任何关于在没有 JS 而完全使用 HTML 和 CSS 的情况下执行整个任务的建议，那么我很乐意看到你们是如何做到的:)

谢谢

Answer 1

你可以只用标记和 css 做这样的事情:

HTML:

 <a href="#">
    <img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" border="0" 
        alt="About Plumbing Repairs in Honolulu Hawaii" />
 </a>

CSS:

a {
    background:url('http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg') 0 0 no-repeat;
    width:150px;
    margin:0;
    padding:0;
    float:left;
}
a img {
    opacity:1;
    transition:opacity .5s;
    float:left;
}
a:hover img {
    opacity:0;
    transition:opacity .5s;
}

Demo