Question

我无法在悬停时缩放图像，因为它被地图遮挡了。只能使用CSS吗？

HTML

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Mapa</title>
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head>
<body>
    <img class="map01" id="Image-Maps-Com-image-maps-2018-06-22-055007" src="images/kraj.png" border="0" width="192" height="156" orgWidth="192" orgHeight="156" usemap="imgmap2018622121647" alt="" />
    <map id="imgmap2018622121647" name="imgmap2018622121647"><area shape="poly" alt="" title="" coords="71,9,174,54,101,140,8,66" href="" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
</body>
</html>

CSS

    .map01{
    transition: all .2s ease-in-out;
}

.map01:hover {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);    
}

http://jsfiddle.net/wndgc63j/4/

Answer 1

您可以如下更改一些CSS和HTML：

.map01{
    transition: all .2s ease-in;
}

map:hover + .map01 {
    -moz-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    transform: scale(1.3);    
}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Mapa</title>
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
</head>
<body>
    <map id="imgmap2018622121647" name="imgmap2018622121647"><area shape="poly" alt="" title="" coords="71,9,174,54,101,140,8,66" href="" target="" /><!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) --></map>
    <img class="map01" id="Image-Maps-Com-image-maps-2018-06-22-055007" src="https://image.ibb.co/cquqc8/kraj.png" border="0" width="192" height="156" orgWidth="192" orgHeight="156" usemap="imgmap2018622121647" alt="" />
    
</body>
</html>

如何在悬停时缩放图像并在其上映射

1 个答案: