在悬停时平滑过渡

Question

我一直在寻找一种方法，通过使用带有名为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来完成整个任务的建议，我很乐意看看你们是如何做到的 :)

谢谢

- brent_white

---

以下列出了CSS的替代方案-不确定是否适用于您的情况。 - SW4

你知道有没有JS的解决方案吗？ - brent_white

我有点困惑 span 在这里的作用是什么？ - brent_white

你有那些没有背景的图片吗？如果有的话，尝试使用CSS应用背景，然后在悬停时应用背景颜色更改和过渡效果。 - arshad

图像是一种替换元素，这是一种您无法在CSS中访问伪（before、after）元素的元素类型。因此，它被替换为一个span，以便我们可以获得所需的图像过渡前后元素。 - SW4

现在完美有意义了！谢谢 @SW4 - brent_white

Answer 1

您可以只使用HTML和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;
}

演示

- Jai

---

这真的很干净..我喜欢它..我看到了我一开始所缺少的，非常感谢 :) - brent_white

你可以尝试从父元素引用到这个锚点，例如：li#repairImg a{} li#repairImg a img{}等等。这意味着你可以给父级li一个id。 - Jai

我遇到了问题，因为我忘记加上 margin:0; padding:0; float:left;，认为这些属性不是必需的。结果证明它们是必须的。您能否解释一下为什么我需要这些属性？ - brent_white

总的来说，我基本上只是在这里创建了一个类 <a class="repair-hov"，然后在 CSS 中，我只是调用了 repair-hov 而不是调用 img，我只是调用了 #repair 的 ID。 - brent_white

成功地让它完美运行了，我浏览了一下这篇文章http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/，这篇文章告诉我为什么你应用了`float`，谢谢@Jai。 - brent_white

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>

- SW4

---

第一版肯定能对他有所帮助 :) 很好的回答, +1 - Alin

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>

- alexr

Answer 4

不要在img标签上设置src属性。

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

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

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

- Edwin Reynoso

---

我需要有替代文本。 - brent_white

如果你在问的话不一定需要，但是如果你想要的话可以，那没问题。 - Edwin Reynoso

我需要在这些图片中添加alt文本，这就是我的意思。你认为JS方法真的不需要吗？ - brent_white

你在生成图片吗？ - Edwin Reynoso

这是尝试它，放置属性，但将其保留为空。 - Edwin Reynoso