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

Question

我的网页上有一张图片，该图片也需要链接。我正在使用图像映射来创建链接，并且我想知道是否存在一种方法可以将鼠标悬停时的区域形状设置为较小的交互性。这可能吗？

我尝试没有成功：

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; }

有什么建议么？

Answer 1

CSS：

在去超市的路上考虑它，您当然也可以跳过整个图像地图的想法，并利用:hover图像顶部的元素（将div更改为a块）。这使事情变得简单得多，不需要jQuery
…

简短说明：

• 图片在底部
• 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" 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" />

使用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>