我一直在寻找一种方法,通过使用带有名为
那是我的初始过程...由于它没有起作用,所以我研究了如何正确实现这一点,并找到了使用JS实现它的方法。 这比我正在研究的某些其他CSS和HTML解决方案要简单得多。
使用JS最终非常适合我需要完成的工作,尽管有一件事我想添加到其中,但我不太确定该如何实现。
我想在图像悬停时添加平滑过渡。
目前的构建链接http://kapena.github.io/pp_web/, 我在这里工作的图标称为修复服务。
HTML
repair_h.svg
的图像的:hover
来更改此<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"
。起初我所做的是将:hover
放置在#repair
上,如此#repair :hover
并给repair一个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来完成整个任务的建议,我很乐意看看你们是如何做到的 :)
谢谢