jquery - 带画布和图像响应的 Div

Question

我想做的事情似乎很容易，但正在消耗我的精力。我在这里有这个例子，当我悬停一个 img 时，它只是向我展示了一个 Div 和 Canvas。问题是，我怎样才能使这三件事响应？

这是我的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>