Question

如何在保持图像响应的同时使50％的图像可点击？

我尝试过使用区域标记和其他问题已经在其他问题中讨论过，但没有一个是响应性的。

我正在进行的网站是spectrospective.com.au，它是主要的Spectrospective横幅图片，上面写着“播放电影”和“播放预告片”。

我的目标是：

<div class="hero-video">
    <div class="container">
        <a href="" data-toggle="modal" data-target="#myhome">
            <img src="images/homepage-banner.png" alt="">
        </a>
    </div>
</div>

Answer 1

我建议使用position: absolute将鼠标悬停在图片的一半以上（参见工作示例）。希望这会有所帮助。

＆＃13;

div {
  display: inline-block;
  position: relative;
}
img {
  background-color: red;
  height: 10em;
  width: 10em
}
a {
  position: absolute;
  top: 0;
  left: 0;
  right: 50%;
  background-color: blue;
  width: 5em;
  height:10em;
}

＆＃13;

<div>
  <img src="image.png" />
  <a href="alink.html"></a>
</div>

＆＃13;

Answer 2

我可能会对此发表评论，但我还没有50个代表......所以，为什么不在图像编辑器（Photoshop，GIMP等）中将图像切成两半？）然后将图像与不同的<a href>并排放置。

替代解决方案：创建一个覆盖图像一半的清晰div，并将<a href>更改为您想要的任何内容。

如何在图像响应时使图像的左侧可单击？

2 个答案: