我可以在这个复杂的不规则形状的链接上使用 CSS 悬停吗

Posted 2023-03-06

【中文标题】我可以在这个复杂的不规则形状的链接上使用 CSS 悬停吗

【英文标题】：Can I use CSS hover on this complex irregular shaped link

【发布时间】：2013-03-28 14:19:30

【问题描述】：

我已经查看了很多可能的解决方案，但仍然没有找到可行的解决方案。我正在尝试使用 CSS 让我的链接在悬停时发光

我尝试使用矩形的每个版本来包含我的图像以链接它们，但有些非常小并且重叠。有没有办法将多坐标合并到 CSS 中？我认为我的主要问题是悬停时发光的 css 代码要求按宽度和 hgt px 的链接大小。但我的 html 链接是不规则形状的 x 和 y 多边形坐标

这是我试图悬停的 CSS 之一，但如果不是 x 和 y 坐标，则不确定在宽度/高度区域中放置什么？

/* wiki image glow */
.wikiimageglow 
 
    margin-bottom: 10px; 
    width: px; 
    height:px; 
    display:block; 
    background:transparent url('http://cdn.obsidianportal.com/assets/199195/weird4.jpg') center top no-repeat; 
 

.wikiimageglow:hover 
 
    background-image: url('http://cdn.obsidianportal.com/assets/199539/character.jpg');     

这里是链接

<img src="http://cdn.obsidianportal.com/assets/199195/weird4.jpg"   border="0" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="poly" coords="351,81,386,317,335,295,302,215" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/game-master-information" />
    <area shape="poly" coords="567,202,405,376,390,321,435,243" href="http://www.obsidianportal.com/campaigns/runelords-of-lord-ao/items" />
    <area shape="poly" coords="368,426,403,379,491,365,608,445" href="http://www.obsidianportal.com/campaigns/runelords-of-lord-ao/characters" />
    <area shape="poly" coords="308,430,364,427,430,489,443,628" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/critical-hits-and-misses" />
    <area shape="poly" coords="268,383,305,428,296,514,195,616" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/character-creation" />
    <area shape="poly" coords="279,323,270,378,198,431,53,412" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/adventure-log" />
    <area shape="poly" coords="126,173,332,296,281,321,197,298" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/geography" />
    <area shape="poly" coords="145,530,151,485,199,457,179,507" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/pride" />
    <area shape="poly" coords="109,352,99,318,107,288,139,270,159,305,151,335" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/wrath" />
    <area shape="poly" coords="220,144,232,139,286,143,292,164,254,189,228,185" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/gluttony" />
    <area shape="poly" coords="432,142,463,142,480,152,461,174,415,211,414,174" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/greed" />
    <area shape="poly" coords="524,287,551,302,564,358,535,355" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/sloth" />
    <area shape="poly" coords="520,469,501,506,459,524,463,499,498,472" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/envy" />
    <area shape="poly" coords="323,522,343,562,337,594,328,606,307,578" href="http://www.obsidianportal.com/campaign/runelords-of-lord-ao/wikis/lust" />
</map>

【问题讨论】：

不能用html/css改变图片内容。最好的办法是使用 HTML 中的绝对定位链接和图像的背景创建类似的效果。

最好将图像拆分并在悬停时将悬停图像显示为该项目的 bg。我猜有很多方法可以做到这一点，但它只是一个开始。

【参考方案1】：

我相信最简单的事情是创建精灵，它基本上是您的原始图像，并且在侧面（通过 css 隐藏）您可以在悬停时显示悬停效果，它会替换图像的一部分，从而创建发光效果随心所欲。

example sprite image

A List Apart: Sprites

【讨论】：

我以前看过那个解决方案，可能会尝试它的一个版本。我唯一的问题是我的一些形状很小，可能会落在它旁边的两个不规则形状的链接之下并完全重叠。这是图片cdn.obsidianportal.com/assets/199195/weird4.jpg

【参考方案2】：

我认为这不能仅通过 CSS 和 HTML 来解决。但是，我发现了这个不错的 jQuery 脚本。它使用您的 map 标记并创建 canvas 元素。

Demo Source

Maphilight 是一个 jQuery 插件，可以为图像地图添加视觉亮点。

它提供了一个 jQuery 函数：$('.foo').maphilight()

在 IE 中使用 VML。在其他浏览器中使用画布。 Maphilight有 已在 Firefox、IE、Safari、Chrome 和 Opera 中测试。

注意：此脚本在最新版本的 jQuery 中不起作用，但 jquery-migrate 修复了该问题。

这里是JSFIDDLE

【讨论】：

是的，非常好的脚本。已添加书签 :) 感谢您的编辑和 +1。

演示：jsfiddle.net/Zhs6q。值得注意的是，它在最新版本的 jQuery 中不起作用。

@Tim Medora 好吧，至少 jquery-migrate 修复了 jsfiddle.net/Zhs6q/2