Javascript jquery显示/隐藏使图像变大

我有一个带有自定义jquery菜单的joomla模板。所有元素的宽度都是100%，但当我将鼠标悬停在地图上时，覆盖层稍微大一点，我不知道为什么。问题出在Firefox和IE11上，但我认为这是我代码中的一个bug。 我使用Joomla 3.2和Flexi自定义代码（版本1.3.1-2012年9月30日）

$.noConflict（）；
jQuery（文档）.ready（函数（$）{
$（文档）.ready（函数（e）{
$（'img[usemap]'）。rwdImageMaps（）；
$（“#一”）.hide（）；
$（“#两”）.hide（）；
$（“#三”）.hide（）；
$（“面积”）。在({
鼠标指针：函数（）{
$（$（this.attr（'alt'））.show（）；
},
mouseleave:function（）{
$（“#一”）.hide（）；
$（“#两”）.hide（）；
$（“#三”）.hide（）；
},
单击：函数（）{
open（“/index.php/”+$（this.attr（'link'），“_self”）；
}
});
});
});
div{
排名：0；
左：0；
溢出：隐藏；
}
img[usemap]{
边界：无；
高度：自动；
最大宽度：100%；
宽度：自动；
}
#一个{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
#两个{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
#三{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
}
#主要{
位置：相对位置；
排名：0；
左：0；
宽度：100%；
}

好的解决方案是计算宽度，而不是采用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>

div{
排名：0；
左：0；
}
img[usemap]{
边界：无；
高度：自动；
最大宽度：100%；
宽度：自动；
}
#一个{
位置：绝对位置；
左：5px；
顶部：5px；
宽度：计算（100%-10px）；
}
#两个{
位置：绝对位置；
左：5px；
顶部：5px；
宽度：计算（100%-10px）；
}
#三{
位置：绝对位置；
左：5px；
顶部：5px；
宽度：计算（100%-10px）；
}
#主要{
位置：相对位置；
排名：0；
左：0；
宽度：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>