我可以在这个复杂的不规则形状的链接上使用 CSS 悬停吗 [英] Can I use CSS hover on this complex irregular shaped link
问题描述
我已经研究了很多可能的解决方案,但仍然没有找到有效的解决方案.我正在尝试使用 CSS 使我的链接在悬停时发光
I've looked at a lot of possible solutions to this, but still have not found one that works. I am trying to get my links to glow on hover using CSS
我尝试使用矩形的每个版本来包含我的图像以链接它们,但有些非常小并且会重叠.有没有办法将多边形坐标合并到 CSS 中?我认为我的主要问题是在悬停时发光的 css 代码要求按宽度和 hgt px 确定链接大小.但是我的 html 链接是不规则形状的 x 和 y 多边形坐标
I have tried to use every version of a rectangle to encompass my image to link them, but some are very small and get overlapped. Is there a way to incorporate poly coordinates into CSS? I think my main issue is css code to glow on hover asks for links size by width and hgt px. But my html links are irregular shaped x and y poly coords
这是我尝试悬停的 CSS 之一,但如果不是 x 和 y 坐标,我不确定在宽度/高度区域放什么?
Here is one of my CSS I was trying to hover but not sure what to put in the width/height area if not the x and y coord?
/* 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" width="654" height="690" 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>
推荐答案
我认为这不能仅用 CSS 和 HTML 来解决.但是,我发现了这个不错的 jQuery 脚本.它使用您的 map
标记并创建 canvas
元素.
I think this can't be solved with CSS and HTML only. But, I've found out this nice jQuery script. It uses your map
markup and creates canvas
elements.
Maphilight 是一个 jQuery 插件,可为图像地图添加视觉亮点.
Maphilight is a jQuery plugin that adds visual hilights to image maps.
它提供了一个 jQuery 函数:$('.foo').maphilight()
It provides a single jQuery function: $('.foo').maphilight()
在 IE 中使用 VML.在其他浏览器中使用画布.Maphilight 有已在 Firefox、IE、Safari、Chrome 和 Opera 中进行测试.
In IE VML is used. In other browsers canvas is used. Maphilight has been tested in Firefox, IE, Safari, Chrome, and Opera.
注意:此脚本在最新版本的 jQuery 中不起作用,但 jquery-migrate
修复了该问题.
NOTE: This script doesn't work in the latest version of jQuery, but jquery-migrate
fixed that.
这里是JSFIDDLE
这篇关于我可以在这个复杂的不规则形状的链接上使用 CSS 悬停吗的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!