放大文本链接热点而不影响文本或页面外观?

不需要任何背景色或边框——只需要放大链接的上方、下方、右侧和左侧的不可见链接区域。

尝试更改填充、边框和边距,但它们要么更改文本外观(例如在链接周围创建多余的空白,我不希望这样),要么只是不影响热点大小。

a{
填料:5px;
}
This solutionis closer,but not quite there.我认为一个知识渊博的CSS编码人员可以解决它。


html


flkasj fdlkasjd flkj sdsdj flkasj fdlkasjd flkj sdlkaj dlkja sdlkjf laksdj
flkasj fdlkasjd flkj sd<a href=“”>香蕉</a><span>香蕉</span>adfsddfa
asdfas dfasdfasdd fasdf slkaj dlkja sdlkjf laksdj flkasj fdlkasjd flkj sdlk公司
css


span{
颜色:蓝色;/*使其看起来像链接*/
}

A{
位置:固定;
/*颜色:透明;/*求解时取消注释*/
填料:20px;
}
请注意,我重复链接文本banana两次,一次用于隐藏链接标记,另一次用于可见文本。我重复文本的原因是为了确保不可见的链接标记与可见文本的大小相同。用这种方式重复文本对于这个问题来说是可以接受的。但是,可能不需要,这取决于如何完成。(如果可能,最好不要重复文本)。


如您所见,链接css上的“padding”是错误的——结果链接偏离了标记:



但这证明了我们可以在不影响页面呈现的情况下,将链接区域放置在原始文本之外(或大于原始文本)。固定的定位似乎是必要的,但也许不同的定位会更好地工作。另外,也许a和span标记需要嵌套,而不是按顺序排列。

一旦CSS完成,链接区域就可以变得透明,这样用户只能看到“假”链接。

a {
  padding: 5px;
}


This solution离得更近,但不是很近。我认为一个有知识的CSS编码人员可以解决这个问题。

HTML

flkasj fdlkasjd flkj sdsdj flkasj fdlkasjd flkj sdlkaj dlkja sdlkjf laksdj 
flkasj fdlkasjd flkj sd <a href="#">banana</a><span>banana</span> adfsddfa 
asdfas dfasdfasdd fasdf slkaj dlkja sdlkjf laksdj flkasj fdlkasjd flkj sdlk


CSS

span{
  color:blue;  /* TO MAKE IT LOOK LIKE A LINK */
}

a{
  position:fixed;
  /* color:transparent; /*  UNCOMMENT WHEN SOLVED */
  padding:20px;
}


注意,我重复链接的文本banana两次,一次用于隐藏链接标记,另一次用于可见文本。我重复文本的原因是为了确保不可见的链接标记与可见文本的大小相同。以这种方式重复文本对于这个问题是可以接受的。但是,可能不需要,这取决于如何完成。(最好是不如有可能,重复文本)。

如您所见,链接css上的“padding”是错误的——结果链接偏离了标记:



但这证明了我们可以在不影响页面呈现的情况下,将链接区域放置在原始文本之外(或大于原始文本)。固定的定位似乎是必要的,但也许不同的定位会更好地工作。还有,也许a和span标记需要嵌套,而不是按顺序排列。

一旦CSS完成,链接区域就可以变得透明,这样用户只能看到“假”链接。