css 的area标签支持hover吗？

Posted 2023-03-30

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>