Question

我想做的事情似乎很容易，但正在消耗我的能量。我有这个example here，当我悬停一个img时，它只显示一个Div和Canvas。问题是，我怎样才能使这三件事变得敏感？

Heres是我的 HTML ，内置风格

<div class="map maphilighted" style="display: block; background: url("
logocultura.png
") repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 720px; height: 305px;">
    <canvas style="width: 720px; height: 305px; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 1;"
    height="305" width="720"></canvas>
    <img class="map maphilighted" width="720" height="305" usemap="#usa"
    src="logocultura.png" style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none;"></img>
</div>

Answer 1

如果要使其响应，则应将width属性更改为一定比例。试试这个：

<div class="map maphilighted" style="display: block; background: url("http://www.gloper.org/highplay.pt/images/cultura/logocultura.png") repeat scroll 0% 0% transparent; position: relative; padding: 0px; width: 100%; height: auto;">
<canvas style="width: 100%; height: auto; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none; opacity: 1;" height="305" width="720"></canvas>
<img class="map maphilighted" width="720" height="305" usemap="#usa" src="/highplay.pt/images/cultura/logocultura.png" style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px none;"></img>
</div>

Div画布和图像响应

1 个答案: