Question

我一直致力于通过<img id="repair" src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg"使用名为:hover的图片来找到更改此repair_h.svg的方法。我最初的做法是:hover #repair就像#repair :hover那样background-image:url并修复<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实现它的方法。这比我正在研究的其他一些CSS和HTML解决方案更少hackie。

使用JS最终为了我需要做的事情而工作得很好，尽管有一件我想添加的内容并且我不太确定如何做到这一点。

我希望在图片悬停时添加平滑过渡效果。

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

HTML

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

{{1}}

如果你们中有任何人有任何关于在没有JS的情况下完成整个任务并且完全使用HTML和CSS的建议，那么我们可以看看你们是怎么做的。

谢谢

Answer 1

你可以用tagup和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

Answer 2

在CSS中，您不能直接在两个图像之间转换/动画，因为CSS无法在两个无值的比例值之间插入关键帧。

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

如果您需要保持图像转换的相同元素/ id，唯一的方法是用非替换元素替换图像，这样您就可以使用伪元素，然后执行以下操作：

span {
  display: inline-block;
  position: relative;
}

span:before,
span:after {
  display: inline-block;
  height: 300px;
  width: 300px;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

span:before {
  content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg);
}

span:after {
  opacity: 1;
  transition: opacity 200ms ease-in;
  content: url(http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg);
}

span:hover:after {
  opacity: 0;
}

<span></span>

或者，如果这不是一个考虑因素，一种常见的方法是重叠两个图像并在悬停时转换正确图像的opacity，从而显示下面的图像。

div:hover img:last-of-type {
  opacity: 1;
  transition: opacity 200ms ease-in;
}
div:hover img:last-of-type {
  opacity: 0;
}
div img {
  position: absolute;
  top: 0;
  left: 0;
}

<div>
  <img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/Repair.svg" />
  <img src="http://d3vi9nkvdbmq5l.cloudfront.net/service-icons/hov/Repair_h.svg" />
</div>

Answer 3

如果从图像中删除蓝色背景并保持透明，则可以使用css轻松完成此操作：

<style type="text/css">
  ul {
    list-style: none; 
  }

  a { 
        display: inline-block;
        width: 230px;
        height: 240px;
        background-color: #8bdafc;
        /* background-image: url(/path/to/img/with-transparent-bg.svg) */
        background-repeat: no-repeat;
        -webkit-transition: background-color .3s;
        -moz-transition: background-color .3s;
        -o-transition: background-color .3s;
        transition: background-color .3s;
    }

    a:hover {
        background-color: #4fc3fb;
    }
</style>

<ul>
  <li>
    <a href="#" title="Your repair text"></a>
  </li>
</ul>

Answer 4

不要在img上设置src属性

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

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

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

悬停时的平滑过渡

4 个答案:

HTML：

CSS：

Demo