Question

首先感谢这个页面，它一直在帮助我！但在这一点上，我有一个问题，我无法找到符合我想要的答案（也许它无法以我的方式实现）。

我希望有一个静态图像的链接，当用户将光标移动到链接上时，我想要一个动画gif播放（动画gif设置为不循环，所以它只播放一次）。当用户移出时返回静态图像，如果用户再次进入，则gif应该从头开始播放。

我使用html5结合CSS来创建我的网页（我正在用它同时学习）。我过去使用C ++和类似程序编程，但从未在Web环境中编程。

到目前为止，这是我尝试过的：

CSS：

.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}

.img-acu:hover
{
background-image: url("acusel.gif");
}

HTML：

<a href="../example.html" class="img-acu" title="ACU Project link"></a>

但什么都没有出现:( 奇怪的是，我使用了两个静态图像（png格式）的相同示例，它工作正常，但由于某些原因，动画GIF它不想工作。

我试过这个：

CSS：

#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}

#test:hover
{
background-image: url("acusel.gif");
}

HTML：

<div id="test"></div>

这很有效，只是链接不起作用，当动画gif到达最后一帧时，它永远不会重置（除非我重新加载页面）。

您知道在HTML5 + CSS中是否有任何方法可以正确实现这一点？我应该使用javascript还是php？

我真的很感激任何帮助！

非常感谢!!

Answer 1

这可以通过使用静态图像和你的gif图像来实现（嘿，9gag怎么做！）

基本脚本可能是这样的：

<img id="myImg" src="staticImg.png" />

<script>
    $(function() {
        $("#myImg").hover(
            function() {
                $(this).attr("src", "animatedImg.gif");
            },
            function() {
                $(this).attr("src", "staticImg.gif");
            }                         
        );                  
    });
</script>

Answer 2

您采用的方法无效，因为CSS不会更改的背景。可以完全使用香草JS + HTML解决此问题。诀窍是放置：

<div class="img-acu">

内部：

<a href="../example.html" title="ACU Project link"> (insert here) </a>

剩下的就是让CSS定位div。这样，您可以设置静态背景，然后在：hover

上进行更改

这里有个小提琴在显示实际操作（或者您可以用这个{@ {3}}来摆弄）：

.img-acu
{
  float: left;
  width: 250px;
  height: 132px;
  background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
  background-size: 125%;
}

.img-acu:hover
{
  background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}

<!-- Don't do this: 
<a href="../example.html" class="img-acu" title="ACU Project link"></a>
-->

<div>
  <div>Click on image below to go to link:</div>
  <a href="https://www.google.com" title="ACU Project link">
    <div class="img-acu"></div>
  </a>
</div>

Answer 3

如果你可以使用canvas，请试试这个：

var lst = new List<string>();
var dic = new Dictionary<int, int>();
string s = "Hello!";
object obj1 = new { Id = 10 };
object obj2 = null;

// True
Console.Write(lst.GetType().IsGenericType && lst is IEnumerable);
// True
Console.Write(dic.GetType().IsGenericType && dic is IEnumerable);
// False
Console.Write(s.GetType().IsGenericType && s is IEnumerable);
// False
Console.Write(obj1.GetType().IsGenericType && obj1 is IEnumerable);
// NullReferenceException: Object reference not set to an instance of 
// an object, so you need to check for null cases too
Console.Write(obj2.GetType().IsGenericType && obj2 is IEnumerable);

Answer 4

希望这种简单的方法可以帮助某人：

<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">

然后添加以下CSS：

.static {
  position: absolute;
  background: white;
 }

.static:hover {
  opacity: 0;
 }

希望对某些人有帮助。我从一个代码笔中获取了代码，并决定一些堆栈溢出用户可能会觉得有帮助。如果您想查看原始的代码笔，请访问此处：CodePen

如何在链接上使用动画gif并在悬停和重置时播放它

4 个答案: