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

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，这样当您移过链接时它不会消失。