Html 如何使一个图像链接时，有文字与链接Ontop

我的项目要求与以前的有所不同

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

HTML

JS

---

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

.class

中的

a

标记。您的链接未分配给图像…请将开始标记移到

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> 

---

这是我的解决方案，这种解决方案很有效。我唯一的问题是，你把鼠标放在“喵喵”左边的文本区域和“我的”下面，你会注意到你仍然在文本链接区域，而不是背景链接区域。这是因为文本链接仍然对该空间具有管辖权。我正在想办法摆脱它

---

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

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

因此，您的解决方案可以是这样的：

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

在页面中呈现一些图例，提及所有隐藏的链接和键盘访问。您可以使用accesskey属性和JS来实现这一点

---

再见，这是我最初的尝试，但没有成功。我的假设是因为

.content

位于img上方的z-索引上，我应该将链接放在

.content

上方，因为它在视觉上看起来也是图像。@icu222much-对我有用：--我可以单击图像链接和文本链接…如果您需要其他功能，请修改您的问题，只是一个注释，不能是的家长。我更新了我的问题。我看到了你的小提琴，注意到我只能点击

.content

中列出的链接。我无法点击

之外的链接。content

@user1734651这是规范的一部分吗？当您提到文本区域与图像大小相同时，它们必须是这样吗？文本的整个区域是否位于图像的顶部？

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

$(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');
    });
});

<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>