我有一个带有自定义 jquery 菜单的 joomla 模板。所有Element的宽度都是100%，但是当我将鼠标悬停在 map 上时，overlay稍微大了一点，我不知道为什么。问题出在 Firefox 和 IE 11 中，但我认为这是我的代码中的错误。 我使用 Joomla 3.2 和 Flexi 自定义代码(版本 1.3.1 - 2012 年 9 月 30 日)。
<HTML>
<BODY>
<img src="templates/images/Banner_menu.png" width="896" height="410" usemap="#MyMap" alt="" id="main"/>
<img src="templates/images/Banner_1.png" width="896" height="410" usemap="#MyMap" alt="" id="One"/>
<img src="templates/images/Banner_2.png" width="896" height="410" usemap="#MyMap" alt="" id="Two"/>
<img src="templates/images/Banner_3.png" width="896" height="410" usemap="#MyMap" alt="" id="Three"/>
<map name="MyMap">
<area shape="rect" coords="0,0,283,430" href="/index.php/one" alt="#One" />
<area shape="rect" coords="283,0,566,430" href="/index.php/two" alt="#Two" />
<area shape="rect" coords="566,0,896,430" href="/index.php/three" alt="#Three"/>
</map>
</BODY>
</HTML>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
$("#One").hide();
$("#Two").hide();
$("#Three").hide();
$("area").on({
mouseenter: function () {
$($(this).attr('alt')).show();
},
mouseleave: function () {
$("#One").hide();
$("#Two").hide();
$("#Three").hide();
},
click: function() {
window.open("/index.php/" + $(this).attr('link') ,"_self");
}
});
});
});
</script>
<style>
div {
top: 0;
left: 0;
overflow: hidden;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
#One {
position:absolute;
top:0;
left:0;
width:100%;
}
#Two {
position:absolute;
top:0;
left:0;
width:100%;
}
#Three {
position:absolute;
top:0;
left:0;
width:100%;
}
#main {
position:relative;
top:0;
left:0;
width:100%;
}
</style>
最佳答案
好的解决方案是计算宽度而不是取 100% 宽度。
</script>
<style>
div {
top: 0;
left: 0;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
#One {
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
}
#Two {
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
}
#Three {
position: absolute;
left: 5px;
top: 5px;
width: calc(100% - 10px);
}
#main {
position:relative;
top:0;
left:0;
width:100%;
}
</style>
关于javascript - jquery 显示/隐藏使图像变大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22384332/