Jquery 用于悬停缩略图，点击完整图片。不工作

Question

结合使用随机位置 jquery 和悬停/单击功能，在悬停时显示随机位置的缩略图，并在单击时显示右上角的全尺寸。

我有两个问题：

1. 它不适用于视频，当 div 返回 display:none 时视频会继续播放。此外，视频缩略图不遵循 z-index:-50 in chrome 并将其置于其他所有内容之上。

2. 这似乎是一种非常复杂的方法。

示例：http://roingbaer.com

非常感谢任何帮助。

HTML：

<div class="text">
    <p>Lorem Ipsum is simply dummy</p>
    <div class="hover">
        <a href="http://example.com">text</a>
        <div class="front">
            <img src="http://images.roingbaer.com/ludvig.png"/>
        </div>
    </div>
    <p>, of the printing and typesetting industry.</p>
    <div class="hover">Link 1
        <div class="front">
            <img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg"/>
        </div>
        <div class="back">
            <img src="http://24.media.tumblr.com/tumblr_lyz7fjMdnN1rp3eymo1_r2_500.jpg"/>
        </div>
    </div>
    <p>,</p>
    <div class="hover">Link 2
        <div class="front">
            <iframe frameborder="0" height="233" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="400"></iframe>
        </div>
        d<div class="back">
            <iframe frameborder="0" height="480" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="853"></iframe>
        </div>
    </div>
</div>

CSS：

.back { 
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    text-align:right; 
}

.front { 
    display:none;
    max-height:200px;
    max-width:auto;
    position:fixed;
    z-index:-50;
    top:0;
    right:100px; 
}

.hover { 
    cursor:pointer;
    margin:0;
    padding:0;
    font-style:italic;
    display:inline; 
}

jQuery:

$(".front").each(function() {
    var right = Math.floor(Math.random()*800);
    var top = Math.floor(Math.random()*500); 
    $(this).css({'margin-right': right});
    $(this).css({'margin-top': top});
});

hoverdiv = $("div.hover")
hoverdiv.on("hover", function() {
    $(this).children(".front").show()
});

hoverdiv.on("mouseleave", function() {
    $(this).children(".front").hide()
})

hoverdiv.on("click", function() {
    $(this).children(".back").toggle()
    $(this).children(".front").hide()
});

Answer 1

你可能想看看这个：http://www.trustweb.it/it/blog/download/jquery-html5-video-tooltip.html