是否可以使用CSS在图像地图上设置鼠标悬停样式？

CSS：

在去超市的路上考虑它，您当然也可以跳过整个图像地图的想法，并利用

:hover

简短说明：

• 图片在底部
• 2 xa显示值：块和绝对定位+不透明度：0
• 悬停时将不透明度设置为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"  href="#"></a><a id="area2"  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" />

使用jQuery的原始答案
我只是用jQuery创建了类似的东西，但我认为这不能仅用CSS来完成。

简短说明：

• 带有绝对定位+显示的翻转（图片或彩色）的Divs：无
• 实际的透明gif #map位于顶部（绝对位置）（以防止mouseout在出现翻转时调用）
• jQuery用于显示/隐藏div

    $(document).ready(function() {        if($('#location-map')) { $('#location-map area').each(function() {     var id = $(this).attr('id');     $(this).mouseover(function() {         $('#overlay'+id).show();     });     $(this).mouseout(function() {         var id = $(this).attr('id');         $('#overlay'+id).hide();     }); });        }    });

body,html {    margin:0;}#emptygif {    position:absolute;    z-index:200;}#overlayr1 {    position:absolute;    background:#fff;    opacity:0.2;    width:300px;    height:160px;    z-index:100;    display:none;}#overlayr2 {    position:absolute;    background:#fff;    opacity:0.2;    width:300px;    height:160px;    top:160px;    z-index:100;    display:none;}

<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" /><div id="overlayr1">&nbsp;</div><div id="overlayr2">&nbsp;</div><img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" /><map name="location-map" id="location-map">  <area shape="rect" coords="0,0,300,160" href="#" id="r1" />  <area shape="rect" coords="0,161,300,350" href="#" id="r2"/></map>