Question

我希望用关键词写出小段信息。当关键词被鼠标悬停在gif上时会弹出一个弹出框 - 见图像（http://imgur.com/SK37Ikc）

我正在谈论的行动（有点）的一个例子是http://imgur.com/gallery/Gh9UR70查看注释并将鼠标移到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>

Answer 1

好吧，这是一个带有弹出视频的FIDDLE。我根据你的链接示例假设了视频。

但是当你说“gif”时，你的意思是GIF动画吗？

这是一个动画gif FIDDLE。

JS

$('.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

1 个答案:

）;