在 div 中加载网页链接的鼠标悬停效果答案

【问题标题】：Load webpage in div on mouse-over effect of link在 div 中加载网页链接的鼠标悬停效果
【发布时间】：2012-07-07 13:10:47
【问题描述】：

我正在开发一个网站（使用 php、html 和 css）。我有一个“新闻和事件”页面，其中包含 url 列表。我想要做的是鼠标悬停在链接上，相应网站的一个小缩影应该加载到一个div中，以便用户知道链接包含什么类型的新闻。

我尝试了鼠标悬停图像和视频的代码，但无法对网页执行相同的操作。

图片：

<a href="Happy-Birthday-1.gif" rel="enlargeimage" rev="targetdiv:loadarea,link:dynamicdrive.com">Happy Birthday</a><br /> <div id="loadarea" style="width: 600px"></div>

对于视频：

 <a onClick="document.getElementById('dynloadarea').innerHTML='<iframe src=\'osmosis.mpg\' width=\'300\' height=\'300\' scrolling=\'auto\' frameborder=\'0\'></iframe>'"> Osmosis</a> <div id="dynloadarea"></div>

-提前致谢！

【问题讨论】：

图片：dynamicdrive.com">HappyBirthday
对于视频：渗透

标签： javascript html mouseout mousehover

【解决方案1】：

使用 blockUI 例子在这里： http://jquery.malsup.com/block/#demos

【讨论】：

【解决方案2】：

试试这个：

$('a').hover(function(){
   var imgpath = $(this).attr('href');
   $('#loadarea').load(imgpath)
}, function(){
   $('#loadarea').empty()
})

【讨论】：

我认为这只有在您尝试加载的页面位于同一台服务器上时才有效。
@soupy1976 是的，图片在同一台服务器上。
@undefined ：我可以加载图像/视频。我想在 div 中加载网页的悬停效果！

【解决方案3】：

您将需要 jQuery .load()。

$('a').hover(function(){
   var path = $(this).attr('href');//Get the path
   $('#result').load(path);//Load contents into a div#result
   , function() {
     $('#result').show();
   }
});

$('a').mouseout(function(){
 $('#result').hide();
});

您将只能在同一台服务器上加载页面。

【讨论】：

【解决方案4】：

$(document).ready(function(){
$('#a').mouseover(function(){
$('#page').css('visibility','visible');
       $('#ss').attr('src',"http://www.w3schools.com/css/default.asp");
});

$('#a').mouseout(function(){
$('#page').css('visibility','hidden');
});
});


<a href="Happy-Birthday-1.gif" rel="enlargeimage" r id="a">Happy Birthday</a><br />
<div id="page">
<iframe width="300" height="300" scrolling="auto" id="ss">
</iframe>
</div>

【讨论】：

我试过你的代码，但链接在 div 上没有显示任何内容。

【解决方案5】：

试试这个。

<p id="p3"><a href="http://apple.com">Apple</a></p>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<link href="http://codegena.com/assets/css/image-preview-for-link.css" rel="stylesheet">
<script src="http://codegena.com/assets/js/image-preview-for-link.js"></script>
<script type="text/javascript">
    $(function () {
        $('#p3 a').miniPreview({ prefetch: 'parenthover' });
        $('#p3 a').miniPreview({ prefetch: 'pageload' });
    });
</script>

【讨论】：