0

我的项目需求与我之前的帖子有所不同。

我现在有一个包含图像的 div，并且内容（带有链接的文本）覆盖在上面。内容与图像具有相同的尺寸。我现在的问题是我无法单击分配给图像的链接。我相信这是因为内容隐藏了背景链接。

http://jsfiddle.net/2mjne/1/

HTML

<div class="ad">
    <img src="http://www.placekitten.com/320/200">
    <a href="#">  
        <div class="content">
             text
             <a class="link" href="">link</a>
        </div>
    </a>
</div>

CSS

.ad {
    position: relative;
    height: 200px;
    width: 320px;
}
.content {
    position: absolute;
    top: 0;
    height: 200px;
    width: 320px;
}
.link {
    visibility: hidden;
}

JS

$(document).ready(function() {
    $('.content').mouseover(function() {
        $(this).find('.link').css('visibility', 'visible');
    });
    $('.content').mouseout(function() {
        $(this).find('.link').css('visibility', 'hidden');
    });
    $('a').click(function() {
        console.log('a clicked');
    });
    $('.link').click(function() {
        console.log('button clicked');
    });
});

编辑：我的模块中有两个不同的链接。一个链接来自背景图片，另一个链接a来自.class.

4

3 回答 3

2

您的链接未分配给图片...将您的开始标签移到img:

<div class="ad">
    <a href="#">
        <img src="http://www.placekitten.com/320/200" />                
        <div class="content">              
            text              
            <a class="link" href="#">link</a>        
        </div>     
    </a> 
</div>
于 2012-10-16T18:41:15.297 回答
0

这是我的解决方案。我唯一遇到的问题是，您将鼠标悬停在“喵”左侧和“我”一词下方的文本区域上，您会注意到您仍在文本链接区域而不是背景链接区域。这是因为文本链接仍然对该空间具有管辖权。我试图弄清楚如何摆脱它。

http://jsfiddle.net/WHpMr/

在此处输入图像描述

于 2012-10-16T22:34:39.957 回答
0

如果图像顶部的文本区域与图像大小相同，则鼠标无法到达图像，因此用户/鼠标组合不存在该链接。

另外，请记住，用户不希望链接在单词之间的空白处发生变化，因此文本链接应该按预期工作。

所以你的解决方案可能是这样的：

检测鼠标的点击，按下鼠标时，向用户提供两个选项，一个用于每个目的地，以及一个简短而清晰的解释。是一种不常见的方式，但它会起作用。

在页面中显示某种图例，提及所有隐藏的链接和键盘访问。您可以使用 accesskey 属性和 JS 来完成这项工作。

再见

于 2012-10-17T00:37:47.557 回答