Javascript 悬停时的平滑过渡

我一直在寻找一种方法来改变这个

：使用一个名为
repair\u h.svg
的图像悬停
。我最初所做的是在
\repair
上放置一个
：hover
，就像这样
\repair:hover
并给repair一个
背景图像：url
，但这不起作用，我认为有一些原因

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

使用JS对于我需要做的事情来说效果非常好，尽管我想补充一点，但我不太确定如何做到这一点

我想添加一个平滑过渡之间的图像时，悬停

链接到我的当前版本
我正在处理的图标称为“修复服务”

HTML

另外，如果你们中的任何人对如何在不使用JS、完全使用HTML和CSS的情况下执行整个任务有任何建议，那么我愿意看看你们是如何做到的：）

谢谢
不要在img上设置
src
属性

<img src='' width=500 height=500>

img{
  background: url("src1");
}

img:hover{
  background: url("src2");
}


img{
背景：url（“src1”）；
}
img：悬停{
背景：url（“src2”）；
}
在CSS中，由于CSS无法在两个无值缩放值之间插入关键帧，因此无法在两个图像之间直接过渡/设置动画

也就是说，有一些方法只使用CSS

如果您需要保留图像转换所使用的相同元素/id，唯一的方法是使用未替换的元素替换图像，以便您可以使用伪元素，然后执行以下操作，例如：


span{
显示：内联块；
位置：相对位置；
}
跨度：之前，
跨度：之后{
显示：内联块；
高度：300px；
宽度：300px；
溢出：隐藏；
位置：绝对位置；
排名：0；
左：0；
}
跨度：之前{
内容：网址(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}
跨度：之后{
不透明度：1；
过渡：不透明度200ms缓和；
内容：网址(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}
跨度：悬停：之后{
不透明度：0；
}
您可以仅使用标记和css执行类似操作：

HTML:
如果从图像中删除蓝色背景并保持其透明，则可以使用css轻松做到这一点：



保险商实验室{
列表样式：无；
}
a{
显示：内联块；
宽度：230px；
高度：240px；
背景色：#8bdafc；
/*背景图像：url（/path/to/img/with transparent bg.svg）*/
背景重复：无重复；
-webkit过渡：背景色。3s；
-moz过渡：背景色。3s；
-o过渡：背景色。3s；
过渡：背景色。3s；
}
a:悬停{
背景色：#4fc3fb；
}




我需要alt文本。如果你不一定要问，但如果你想说“是”，那就说吧，这不太好。我需要在这些图像中使用alt文本，这就是我要说的。你认为JS方法不是真的需要吗？等等，你是在生成图像吗？我不认为可以省略下面列出的src？CSS替代方案-不确定是否适用于你的场景-你知道JS解决方案吗？我也有点困惑span在做什么？它在这里扮演什么角色？你有没有没有没有背景的图像？如果有，那么尝试使用css应用背景，然后在悬停时应用背景颜色更改和转换。图像是一个被替换的元素，是一种在css中无法访问伪（before，efter）元素的元素。因此，它被替换为一个跨度，这样我们就可以得到图像转换所需的前后元素。第一个版本肯定会为他带来好处：）回答得好，+1这真的很干净..我喜欢..我知道我在乞讨的thax中遗漏了很多：）实际上这个bc有问题，我不能只调用运行在我所有链接中的
a
。尝试在
a
上添加类名，但这似乎不适用于你的示例。你可以尝试从它的父母。例如：
li#repaiimg a{}li#repaiimg a img{}
等。这意味着您可以给父li提供一个id。我遇到了问题bc I遗漏了
margin:0；填充：0；浮动：左认为我不需要它…结果它需要。你能解释一下为什么我需要这些属性吗？总而言之，我只是在这里创建了一个类

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');

<img src='' width=500 height=500>

img{
  background: url("src1");
}

img:hover{
  background: url("src2");
}

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

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;
}