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

Question

我正在使用 asp.net、telerik RadAjax 控件开发一个 Web 应用程序。当鼠标悬停在图像上然后显示超链接时，我必须进行开发，然后单击 clink 然后打开一个新窗口（如 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，这样当您移动链接时它不会消失。