0
使用隨機位置jQuery和懸停/點擊功能的組合在懸停時顯示隨機位置的縮略圖，點擊右上角顯示完整大小。Jquery的懸停縮略圖，單擊完整圖片。不起作用
我有兩個問題：
它不具有視頻工作，影片繼續播放時，DIV追溯到顯示：無。此外，視頻縮略圖不會遵循chrome中的z-index：-50，並將其置於其他所有內容之上。
這似乎是一個非常複雜的方式來做到這一點。
高度讚賞任何幫助。
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()
});