Question

我的项目要求与之前的post有所不同。

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

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标记。

Answer 1

您的链接未分配给图片...在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>

Answer 2

这是我的解决方案。我唯一的问题是你将鼠标放在“喵”左边的文本区域上，而在“我的”这个词的下方，你会注意到你仍然在文本链接的区域而不是背景链接。这是因为文本链接仍然对此空间具有管辖权。我想弄清楚如何摆脱它。

http://jsfiddle.net/WHpMr/

enter image description here

Answer 3

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

此外，请记住，用户不希望链接在单词之间的空白区域中发生更改，因此文本链接应按预期工作。

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

检测鼠标点击，按下时，向用户显示两个选项，每个目的地一个，以及简短明了的解释。这是一种不寻常的方式，但它会起作用。

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

再见

如果有带顶部链接的文本，如何使图像可单击

3 个答案: