我正在尝试使用 jquery hide() 突出显示图像 map 区域,
我有突出显示的div,它们绝对位于这些区域上,我试图在悬停时显示div,但问题是当鼠标悬停在特定区域上时,突出显示会发生,但很快就会消失,即使鼠标在仍在该区域徘徊,
知道我做错了什么吗
<div class="highlight" id="first_area_highlight"></div>
<div class="highlight" id="second_area_highlight"></div>
<map name="worksMap" id="worksMap" class="map-areas">
<area id="first_area" shape="poly" coords="80,64,176,46,186,95" />
<area id="second_area" shape="rect" coords="196,107,272,222" />
.....
</map>
$(function() {
$('.highlight').hide();
var id;
$('area').hover(function() {
id = $(this).attr('id');
highlight(id);
},function() {
unHighlight(id);
});
function highlight(id) {
$('#' + id + '_highlight').show('slow');
}
function unHighlight(id) {
$('#' + id + '_highlight').hide('slow');
}
});
最佳答案
.highlight
div 与您的区域
重叠,当鼠标悬停在某个区域上时,会显示突出显示,但它会消失,因为区域
失去悬停。
你可以做的是在area.mouseenter上显示.highlight
并在highlight.mouseleave上隐藏.highlight
。
这个想法是这样的:
$('area')
.mouseenter(function() {
var id = $(this).attr('id');
$('#' + id + '_highlight').show('slow');
});
$('.highlight')
.mouseleave(function () {
$(this).hide('slow');
})
.hide();
关于jquery - 使用 jquery 突出显示图像映射区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2311010/