Map的area属性标签鼠标Hover可以给area加背景吗

Posted 2023-03-30

如题:Map的area属性标签鼠标Hover可以给area加背景吗?如果可以,具体点要怎么加呢?请详细说明!

不行！
现在 html + CSS 还没有你说的那么先进。
整个影射的范围是一张图片，要实现你的要求，必须创建一个区域或者调用一张图片覆盖影射选定的范围的图片区域。

等过几年吧，说不定有希望。 参考技术A 不支持

CSS1中只有a支持
CSS2，CSS3，支持其他元素，但是也不是不支持area

css 的area标签支持hover吗？

html代码如下，希望鼠标移到相应的area能触发hover事件，本人对CSS不太专业，望牛人指点。最好就是把style附在回答里面。可以用的话追加100分。
<div class="fc-show-box" >
<img src="33.jpg" width="950" height="569" border="0" usemap="#Map" longdesc="file:///C|/Documents and Settings/Administrator/desktop/33.jpg" />
<map name="map">
<area class="item1" shape="poly" coords="30,39,209,39,209,538,30,538" href="#" />
<area class="item2" shape="poly" coords="215,40,447,39,447,545,215,545" href="#" />
<area class="item3" shape="poly" coords="453,13,585,13,585,561,453,580" href="#" />
</map>
</div>
有个前提，只能使用CSS布局，而且ID属性已被禁止。文下是否有实现的可能性。

您好！首先你提到的css的area标签是不支持hover的，只有a标签才支持。li标签在IE浏览器下才支持。你说的效果完全可以用js来实现啊！我为你整理了一下代码，希望对您有帮助：
<script>
function ahover(id)

alert(document.getElementById(id).className);

</script>
<div class="fc-show-box" >
<img src="33.jpg" width="950" height="569" border="0" usemap="#Map" />
<map name="map">
<area class="item1" shape="poly" id="a1" onmouseover="ahover('a1')" coords="30,39,209,39,209,538,30,538" href="#" />
<area class="item2" shape="poly" id="a2" onmouseover="ahover('a2')" coords="215,40,447,39,447,545,215,545" href="#" />
<area class="item3" shape="poly" id="a3" onmouseover="ahover('a3')" coords="453,13,585,13,585,561,453,580" href="#" />
</map>
</div> 参考技术A hover在CSS1中此伪类仅可用于a对象。且对于无href属性（特性）的a对象，此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
目前IE6+仅支持CSS1中的:hover。
在这里，就用JS的onmouseover事件实现吧：
原理：当鼠标进入AREA区域时弹出该元素的alt属性，你也可以自己修改

<div class="fc-show-box" >
<img src="33.jpg" width="950" height="569" border="0" usemap="#Map" longdesc="file:///C|/Documents and Settings/Administrator/desktop/33.jpg" />
<map name="map" id="map">
<area class="item1" shape="poly" coords="30,39,209,39,209,538,30,538" href="#" alt="位置1" />
<area class="item2" shape="poly" coords="215,40,447,39,447,545,215,545" href="#" alt="位置2" />
<area class="item3" shape="poly" coords="453,13,585,13,585,561,453,580" href="#" alt="位置3" />
</map>
</div>
<script type="text/javascript">
(function()
var tag = document.getElementById('map').getElementsByTagName('area');
for(var i = 0; i<tag.length;i++)
(function(_i)
tag[_i].onmouseover = function() alert(this.alt); /*这一句是可修改的*/ ;
)(i);

)();
</script>本回答被提问者采纳 参考技术B <script language="javascript" type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function()
$("#Map area").hover(function()
alert($(this).attr('coords'));
,function()

);

)

</script>