css 的area标签支持hover吗?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

以上是关于css 的area标签支持hover吗?的主要内容,如果未能解决你的问题,请参考以下文章

CSS中的a:hover表示啥

(css)中a.on:hover是啥意思

CSS--基础

css中a.other:hover,这个是啥意思?

html 除了a标签能有visit和hover属性吗

Chrome64基础 开发者工具 查看a标签处于:hover时的css代码