Jquery和Tumblr的问题

我在我基于tumblr的主页上使用了一个愚蠢的Javascript组合，在鼠标悬停时显示一个随机定位的缩略图，点击后可以看到更大的图片。我有几个问题：

tumblr会自动将文本放在段落中，这会在链接1后面创建一个空间，而链接1和、、不太兼容

当我有一个我放大并播放的视频时，它会在显示器崩溃时继续播放

我还没有找到一个在链接之前在文本后面创建文字包装的解决方案。我希望它看起来像这样： Lorem Ipsum只是印刷和排版行业的虚拟文本。 链接1，链接2

我还必须写两次图片链接，但我可以接受

如果有人帮助我，我将非常感激

注：请在此处查看它的实际操作：

CSS

HTML

---

我认为你应该把这个问题分成3个不同的问题，并尝试清理代码，这样每个问题只显示相关信息。另外，请解释您可以访问的内容。例如，我看到文本自动放置在标记中，但是您可以编辑HTML还是粘贴生成的内容？

$(".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()
});​

p { margin:0;
padding:0;
display:inline;
}

.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;
}

img{ 
max-width:inherit;
max-height:inherit;
right:0;
top:0;
}


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

  <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>
<div class="back"><iframe frameborder="0" height="480" src="http://www.youtube.com/embed/VMeXGE_a8Gg" width="853"></iframe></div>
</div>
    </div>

    ​