javascript - 悬停时平稳过渡

我一直在寻找一种方法，通过将<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"与名为:hover的图像一起使用来更改此repair_h.svg。我最初要做的是像这样将:hover放在#repair上并修复#repair :hover，但这没有用，我认为原因有很多。

那是我的初始过程...由于无法正常工作，我对如何正确实现此目标进行了一些研究，并找到了使用JS实现此目标的方法。与我正在研究的其他CSS和HTML解决方案相比，这比hackie少得多。

使用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的情况下执行整个任务，那么我很乐意看到您将如何做:)

谢谢

最佳答案

您可以仅使用标记和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