Question

在我正在使用的网站上，有一个滑块可以随机抽取不同尺寸的照片。为了保持滑块的均匀和整洁，我通过旋转图像顶部的图像来像边框一样，有一个洞可以看到图像通过。它看起来很棒。网站所针对的人希望图像可以点击，我尝试将锚标签打开，当我点击它时不会导致任何地方，因为即使图像中有一个洞，它的表现就好像那里有东西。我已经查找了如何解决此问题，但我无法在任何地方找到任何信息。

有人知道这是否可行？如果需要，我愿意使用jquery但是我被卡住了

    <div id="right">
     <div class="border-image">
     <img src="images/border.png" />
</div>
<div class="cyclepictures">
<div>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
<a href=''><img src="" style="position: relative!important; margin: auto!important; padding-top: 30px;" /></a>
</div>

</div>

这是通过图像滑块生成的

Answer 1

JQUERY：

$('.border-image').on('click', function(){
    $('a.active').trigger('click'); // assuming your current image's anchor has active class.
});

单击边框图像后，将使用上述方法触发当前活动的锚点/图像的单击。这与Ken上面提到的相同。

Answer 2

为此，您应该为图片添加onclick="window.location.href='#link'"：

<img src="#" onclick="window.location.href='#link'"/>

您可能还希望鼠标光标在悬停在常规链接上时发生变化，因此您应该将cursor:pointer样式属性添加到图像中。

如何使这个锚标签可点击？

2 个答案: