Question

我试图在链接上悬停时弹出一个弹出窗口，我找到并尝试了如下代码：

<html>
<head>
<style>
.box{
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
}
</style>
</head>
<body>
<a href="http://getbootstrap.com/">Bootstrap</a>
<div class="box">
<iframe src="http://getbootstrap.com/" width = "500px" height = "500px">
</iframe>
</div> 
</body>
</html>

我从上面的代码得到了输出，现在我想在MVC中尝试它，我试着这样做，下面是我的MVC代码：

   <div class="col-md-6">
    @if (@item.Linkreviewsothersite != null)
            {
                    <p class="readmore text-right"><a id="showreview" href="@item.Linkreviewsothersite"> Reviews</a></p>
                        <div id="reviewbox" class="embed-responsive-4by3 hidden">
                        <iframe class="embed-responsive-item" src="http://getbootstrap.com/"></iframe>
                        </div>
                }
   </div>
$('#showreview').hover(function () {
    $('#reviewbox').css({
        display: "block",
        position: "relative", 
        zindex: "100"
});
})

当我尝试在上面的代码中执行此操作时，我错过了某些内容，有人可以帮助我吗...

Answer 1

实现这一目标的更简单方法是使用：

<div id="hoverMe">Hover over here</div>
<iframe id="tooltip" src="http://jsfiddle.net"></iframe>

jQuery - 请参阅Demo

$('#hoverMe').hover(function () {
    $('#tooltip').fadeIn();
}, function () {
    $('#tooltip').fadeOut();
});

请参阅here以获取参考资料

如何在鼠标悬停在MVC链接上的小弹出链接页面中显示实时预览？

1 个答案: