如何在保持图像响应的同时使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>
答案 0 :(得分:2)
我建议使用position: absolute
将鼠标悬停在图片的一半以上(参见工作示例)。希望这会有所帮助。
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;
答案 1 :(得分:0)
我可能会对此发表评论,但我还没有50个代表......所以,为什么不在图像编辑器(Photoshop,GIMP等)中将图像切成两半? )然后将图像与不同的<a href>
并排放置。
替代解决方案:创建一个覆盖图像一半的清晰div,并将<a href>
更改为您想要的任何内容。