当鼠标悬停在缩略图上时Google加弹出框?
问题描述:
我想弄清楚如何创建一个弹出框与鼠标悬停的用户配置文件的细节,就像你看到谷歌加。当将鼠标悬停在缩略图上时,会出现一个弹出窗口,并将该人员添加到您的圈子中。当鼠标悬停在缩略图上时Google加弹出框?
这似乎很容易与jQuery做,但我一直无法找到一个简单的解决方案。我遇到的大多数插件都太复杂,需要大量的调整。任何帮助如何做到这一点将不胜感激! Hover Effect Screenshot
答
最简单的解决方案是将隐藏的div添加到包裹您的个人资料照片的元素。
<div class="profile-popup" style="display: none;">
<!-- Popup info goes here -->
</div>
来吧,风格CSS股利但是你希望它出现,与对“弹出”效果右下角绝对定位说。然后注册在jQuery的mouseOver事件,显示DIV:
$().ready(function() {
$('.profile-pic-wrapper').mouseenter(function() {
$('.profile-popup', this).show(//pass in some animation options here);
});
$('.profile-pic-wrapper').mouseleave(function() {
$('.profile-popup', this).hide(//pass in some animation options here);
});
});
这仅仅是一个基本的想法(和代码可能需要进行调整了一下)。您必须添加一些额外的逻辑来保持弹出窗口在用户打开时打开,但这应该让您开始。
更优雅的解决方案是将JSON数据传递给您的jQuery脚本,并让它在悬停时动态生成弹出窗口div,但这有点高级。
答
你会想要try something like this。它不处理所有需要的情况(当用户进入弹出窗口时,需要悬停以保持活动状态);但你可以在我希望的部分工作。
这里是基本的jQuery代码:
jQuery(function($) {
function getMyContent($img) {
// do your fancy ajax calls or append your control links and such here
return $('<p />').append($img.clone()).append('Here is my fancy hoverbox');
}
$('#content img').mouseenter(function(e) {
var $this = $(this), off = $this.offset();
var pos = {
// or you could position it relative to the mouse
top: (e.clientY + 2) + 'px',
left: (e.clientX + 2) + 'px'
};
$('#hoverbox').css(pos)
.append(getMyContent($this))
.fadeTo('slow', .95);
}).mouseleave(function(e) {
$('#hoverbox').fadeOut('slow', function() { $(this).html(''); });
});
});
UPDATE:Here is one that handles the hover events上弹出你(是的,我还在用它瞎搞;为什么?)
德勤!看起来很坚固;) – Kato
谢谢,我喜欢你的更好,但:P –
谢谢,我将不得不尝试一下。 – Eric