我想在不同的位置播放鼠标悬停的 gif答案

【问题标题】：I'd like to play gifs on mouse over in a different location我想在不同的位置播放鼠标悬停的 gif
【发布时间】：2014-03-06 08:20:24
【问题描述】：

我正在寻找包含关键词的小段信息。当关键字悬停在 gif 上时，会在弹出框中播放 - 参见图片 (http://imgur.com/SK37Ikc)

我正在谈论的一个例子（有点）是http://imgur.com/gallery/Gh9UR70 看看 cmets 并将鼠标悬停在 gif 上（#8 左右）。我想做同样的事情。我的编程经验非常有限，不需要将其构建到整个网页中，只需将其放在另一个页面的一小部分中即可。

提前感谢您的帮助！

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>

$(function(){
$('#img_wrap').mouseover( function() {
     $(this).toggleClass('animated', 'static');
    })
})

</script>

<style>
.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}
</style>
</head>
<body>


<div id="img_wrap" class="static">
    Big long write up would go here with various key words being spaced throughout that I would like to play gifs on mouse over.
    <img id="animated" src="http://i.imgur.com/MgYashD.gif" alt="">
    </div>

</body>

【问题讨论】：

标签： jquery html gif

【解决方案1】：

嗯，这是一个带有弹出视频的FIDDLE。我根据您的链接示例假设视频。

但是当您说“gif”时，您只是指动画 gif 吗？

这是一个动画 gif FIDDLE。

$('.mouseoverme').hover(
    function(){
        $('.hiddendiv').css('display', 'block');
        $('.hiddendiv').html(
            "<img src='https://secure.mooseintl.org/FRUAdmin/images/gears_animated.gif' />"
            );
                       },
    function(){
        $('.hiddendiv').css('display', 'none');
               }

);

文本中的示例关键字。

<p> We the <span id='people'>people</span> in order to form a more perfect <span id='union'>union</span></p>

然后只需使用 id 进行 .hover。

【讨论】：

动画 gif Fiddle 非常接近我想要的。本质上，但使用文本而不是块，然后能够根据关键字从同一段落中调用多个 gif
我已经编辑了我的答案以解决“关键词”的问题 - 只需将它们放在一个带有 id 的跨度中。但现在我很困惑。在您最初的问题中，您说“gif 将在弹出窗口中播放”。你想要什么？文本还是 .gif？
这个想法是有一段文本，当你将鼠标悬停在其中的某些单词上时 -> gif 会弹出。所以本质上是这个东西jsfiddle.net/MG5c5/23，但不是两个红色框，我将鼠标悬停在一个单词上来调用所有内容而不是框
这就是我得到的结果，虽然我不确定自己做错了什么 -
星际之门从吉姆那里打开，但轰炸机的出色侦察确保他安全并且适用于 3 rax 压力，由双光子过充电保持。 Jim 建立了他的 Colossus/Phoenix 军队，但 Bomber 不会拥有它，并推进并集中 Colossus 与 Vikings 以取得胜利。 cdn.makeagif.com/media/2-08-2014/HJqgCc.gif" alt="">
我只是把 spans 放在两个单词的周围，并将背景从红色改为粗体 - jsfiddle.net/timspqr/MG5c5/29