使用CSS可以在图像地图上设置鼠标hover吗？
我有一个网页上的图像，也需要链接。 我正在使用一个图像映射来创build链接，我想知道是否有一种方式来鼠标hover的区域形状的风格，只是一点点的交互性。 这可能吗？
我试过这个没成功：
HTML
<img src="{main_photo}" alt="locations map" usemap="#location-map" /> <map name="location-map"> <area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" /> <area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" /> <area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" /> </map> CSS
area { border: 1px solid #d5d5d5; }
有什么build议么？
仅限CSS：
在去超市的路上考虑一下，你当然也可以跳过整个图像地图的想法，并利用:hover在图像顶部的元素（将div更改为一个块）。 这使得事情变得简单很多，不需要jQuery …
简短的解释：
- 图像在底部
- 2 xa与显示：块和绝对定位+不透明度：0
- hover时将不透明度设置为0.2
例：
.area { background:#fff; display:block; height:475px; opacity:0; position:absolute; width:320px; } #area2 { left:320px; } #area1:hover, #area2:hover { opacity:0.2; }
<a id="area1" class="area" href="#"></a> <a id="area2" class="area" href="#"></a> <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
我不认为这是可能的只是使用CSS（至less不跨浏览器），但jQuery插件ImageMapster将做你的事情。 您可以在图像地图上勾勒，上色或使用替代图像进行hover/活动状态。
下面是一个使用+ next兄弟select器的纯css :hover和pointer-events 。 在技术上它并不使用图像映射，但是rect概念完全可以inheritance：
.hotspot { position: absolute; border: 1px solid blue; } .hotspot + * { pointer-events: none; opacity: 0; } .hotspot:hover + * { opacity: 1.0; } .wash { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255, 255, 255, 0.6); }
<div style="position: relative; height: 188px; width: 300px;"> <img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg"> <div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div> <div> <div class="wash"></div> <div style="position: absolute; top: 0; left: 0;">A</div> </div> <div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div> <div> <div class="wash"></div> <div style="position: absolute; top: 0; left: 0;">B</div> </div> </div>
对不起，在游戏后期跳过这个问题，但我有一个不规则的（非矩形）形状的答案。 我使用SVG解决了这个问题，以生成我想要附加事件的掩码。
这个想法是附加事件内联的SVGs，超便宜，甚至用户友好，因为有大量的程序来生成SVGs。 SVG可以有一层图像作为背景。
http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/
你可以使用canvas
在HTML中，只需添加一个canva
<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;"> Your browser can't read canvas</canvas>
而在JavaScript（只是一个例子，这将在图片上绘制一个矩形）
var c = document.getElementById("locations"); var ctx = c.getContext("2d"); var img = new Image(); img.src = '{main_photo}'; img.onload = function() { // after the pic is loaded ctx.drawImage(this,0,0); // add the picture ctx.beginPath(); // start the rectangle ctx.moveTo(50,50); ctx.lineTo(200,50); ctx.lineTo(200,200); ctx.lineTo(50,200); ctx.lineTo(50,50); ctx.strokeStyle = "sienna"; // set color ctx.stroke(); // apply color ctx.lineWidth = 5; // ctx.closePath(); };
你可以通过改变html来做到这一点。 这是一个例子：
<hmtl> <head> <title>Some title</title> </head> <body> <map name="navigatemap"> <area shape="rect" coords="166,4,319,41" href="WII.htm" onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverWII).png'" /> <area shape="rect" coords="330,4,483,41" href="OT.htm" onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOT).png'" /> <area shape="rect" coords="491,3,645,41" href="OP.htm" onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'" onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOP).png'" /> </map> <img src="Assets/NavigationBar(OnHome).png" name="navbar" usemap="#navigatemap" /> </body> </html>
