Question

所以我在页面上有一个图像和一个与该图像对应的图像，然后我还有两个相应的图像，每个图像的大小与第一个（大部分是透明的）相同，我想在某个区域覆盖到该图像上图像映射被鼠标悬停。我将如何做到这一点，这是我可以用CSS完成的，还是我需要javascript呢？

Answer 1

我认为您确实需要Javascript，因为并非所有浏览器都支持除hover以外的元素上的css <a> psuedo-class。你应该能够用最少的Javascript来做到这一点。请参阅<map>代码：http://www.w3schools.com/tags/tag_map.asp

例如，如果您希望将鼠标悬停在图片左上方100 x 100像素的正方形（image1.png）以启用叠加图像（image2.png）：

<script type="text/javascript">
    function area1_mouseover() {
        document.getElementById('image2').style.visibility = 'visible';
    }
    function area1_mouseout() {
        document.getElementById('image2').style.visibility = 'hidden';
    }
</script>
<img src="image2.png" id="image2" style="position: absolute; visibility: hidden; z-index: 2;" usemap="#my_map" />
<img src="image1.png" id="image1" usemap="#my_map" />
<map name="my_map">
    <area shape="rect" coords="0,0,100,100" onmouseover="area1_mouseover();" onmouseout="area1_mouseout();" />
</map>

编辑：将地图应用于所有图像应解决该问题，因为它们的大小都相同。

HTML / Javascript覆盖区域鼠标悬停的图像

1 个答案: