鼠标悬停在图像上时显示超链接和弹出窗口！

Question

我正在使用asp.net，telerik RadAjax控件开发一个Web应用程序。我必须开发鼠标悬停图像然后显示超链接，然后单击克隆，然后打开一个新窗口（如Facebook个人资料图片更改）。请帮帮我......

Answer 1

这样的东西？ http://jsfiddle.net/d8BSC/

这是标记：

<div id="cow-wrapper">
    <div id="cow-link">
        <a href="http://www.google.com" target="_blank">Link to Google</a>
    </div>
    <img src="http://co2calculator.files.wordpress.com/2008/09/grazing-cow-1b.jpg" />
</div>

然后你只需将包含链接的div设置为绝对定位并最初隐藏它。然后使用jQuery，执行以下操作：

var cowLink = $('#cow-link');
var cow = $('#cow-link + img');
var cowPos = cow.position();
var linkLeft = cowPos.left + (cow.width() - cowLink.width());

cowLink.css({
    top: cowPos.top + 'px',
    left: linkLeft + 'px'
});

$('#cow-wrapper').hover(function() {
    cowLink.show();
}, function() {
    cowLink.hide();
});

这只是通过找到奶牛图像的左边+奶牛图像的宽度减去div的宽度来计算链接div的顶部和左边。然后你只需要将div设置为隐藏并显示它何时被悬停。我使用了一个包装器div，这样当你移动链接时它就不会消失。