我试图在悬停在链接上时弹出一个窗口，我找到并尝试了如下代码:
<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"
});
})
当我尝试在上面的代码中执行此操作时，我遗漏了一些东西，有人可以帮助我吗......
最佳答案
实现此目的的更简单方法是使用:
<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供引用
关于javascript - 如何在鼠标悬停在 MVC 中的链接上时在链接页面的小弹出窗口中显示实时预览？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37476129/