Question

我有一个带自定义jquery菜单的joomla模板。所有元素的宽度都是100％，但是当我将鼠标悬停在地图上时，叠加层会略大，我不知道为什么。问题出在Firefox和IE 11中，但我认为这是我的代码中的一个错误。我使用Joomla 3.2和Flexi Custom Code（版本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>

Answer 1

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

jquery show / hide使图像更大

1 个答案: