文字链接隐藏我的图片链接 [英] Text Link is Hiding my Image Link

问题描述

我有一个图像，其中文字/链接覆盖在顶部。我的问题是，有时前景中的文本会隐藏背景中图像中的链接。我认为这是因为文本框在文本周围形成了一个不可见的矩形，因此创建了一个区域，该区域应该属于图像，但实际上正在被文本覆盖。我想知道是否有可能当我将鼠标悬停在这个区域时，我会链接到我的图像链接，与我的文本链接相反（请参阅插图）。

a href =http://jsfiddle.net/WHpMr/ =nofollow noreferrer> http://jsfiddle.net/WHpMr/

解决方案

试试这个，即把你的标签放在里面： http://jsfiddle.net/WHpMr/3 /

HTML：

 < div class = 广告 > 
< span class =link middle right>< a href =＃textclass =inline-link> my text link abcdefg< br> meow< br> meow< br> meow< ; / A>< /跨度> 
< a href =＃background>< img src =http://www.placekitten.com/320/200>< / a> 
< / div> 
  

CSS：

  .ad {
 position：relative; 
 height：200px; 
 width：320px; 
} 
 .link {
 position：absolute; 
 padding：20px; 
 pointer-events：none; 
} 
 .inline-link {
 pointer-events：all; 
} 
 .top {top：0％; } 
 .middle {top：33％; } 
 .bottom {top：66％; } 
 .left {text-align：left;左：0％; } 
 .center {text-align：center;保证金：0汽车;宽度：100％; } 
 .right {text-align：right;右：0％; } 
  

I have a image where text/link is overlayed on top. My problem is that sometimes the text in the foreground will hide the link in the image in the background. I assume this is because the text box forms an invisible rectangle around the text, thus creating a region that appears it should belong to the image but is actually being covered by the text. I am wondering if it is possible that when I mouse over this region, I will be linking to my image link as oppose to my text link (see illustration).

http://jsfiddle.net/WHpMr/

解决方案

Try this, i.e. put your tag inside : http://jsfiddle.net/WHpMr/3/

HTML:

<div class="ad">
    <span class="link middle right"><a href="#text" class="inline-link">my text link abcdefg<br>meow<br>meow<br>meow</a></span>
    <a href="#background"><img src="http://www.placekitten.com/320/200"></a>
</div>

CSS:

.ad {
    position: relative;
    height: 200px;
    width: 320px;
}
.link {
    position: absolute;
    padding: 20px;
    pointer-events: none;
}
.inline-link {
    pointer-events: all;
}
.top { top:0%; }
.middle { top:33%; }
.bottom { top:66%; }
.left { text-align:left; left:0%; }
.center { text-align:center; margin:0 auto; width:100%; }
.right { text-align:right; right:0%; }

这篇关于文字链接隐藏我的图片链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！