我创建了一个包含 6 个圆圈的图像 map 。我正在尝试在每个圆圈上添加悬停效果。
还添加了 Jquery 以在单击每个图像时显示不同的内容。它工作正常。但我也想在页面加载时显示默认内容，这是行不通的。
我在这里添加了代码。
你能帮我吗？
function codeAddress() {
$('.whyt').html($('.why-us').html());
}
window.onload = codeAddress;
document.getElementsByClassName( "p5" )[0].onclick = function(){
$('.whyt').html($('.why-us').html());
};
document.getElementsByClassName( "p6" )[0].onclick = function(){
$('.whyt').html($('.seo').html());
};
document.getElementsByClassName( "p7" )[0].onclick = function(){
$('.whyt').html($('.ranking').html());
};
document.getElementsByClassName( "p8" )[0].onclick = function(){
$('.whyt').html($('.benefits').html());
};
document.getElementsByClassName( "p9" )[0].onclick = function(){
$('.whyt').html($('.quality').html());
};
document.getElementsByClassName( "p10" )[0].onclick = function(){
$('.whyt').html($('.faq').html());
};#map14 area:hover {
background: url('https://searchmgseo.com.au/smg/wp-content/uploads/2015/09/SEO_Icon.png');
display:block;
position:absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="why-img" src="https://searchmgseo.com.au/smg/wp-content/themes/smg/Images/Why_Us.png" alt="" usemap="#map14">
<map id="map14" name="map14">
<area shape="rect" coords="289,8,407,126" title="" alt="" href="#tt1" class="p5">
<area shape="rect" coords="17,18,116,117" title="" alt="" href="#tt1" class="p6">
<area shape="rect" coords="144,201,246,305" title="" alt="" href="#tt1" class="p7">
<area shape="rect" coords="403,283,498,380" title="" alt="" href="#tt1" class="p8">
<area shape="rect" coords="235,403,332,503" title="" alt="" href="#tt1" class="p9">
<area shape="rect" coords="16,403,116,503" title="" alt="" href="#tt1" class="p10">
</map>
<div class="col-sm-6 whyt">
<a name="tt1"></a>
</div>
<div style="display:none;">
<div class="why-us">
<h3>Why Us</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a>
</div>
<div class="seo">
<h3>SEO</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a>
</div>
<div class="ranking">
<h3>Page 1 Rankings</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a>
</div>
<div class="benefits">
<h3>Benefits</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a>
</div>
<div class="quality">
<h3>Quality</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a>
</div>
<div class="faq">
<h3>FAQ</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a>
</div>
</div>最佳答案
您不能在图像映射区域应用悬停效果。我做了一个技巧，将悬停效果应用于图像映射区域。只需在静止图像映射区域应用该技巧即可。
请检查。
$(document).ready(function(){
$('.p6').mouseover(function(){
$(".nav-wrap span.backer").css({"background":"url('https://searchmgseo.com.au/smg/wp-content/uploads/2015/09/SEO_Icon.png')","z-index":"999"});
});
$('.why-img').mouseout(function(){
$(".nav-wrap span.backer").css({"background":"none","z-index":"100"});
});
$('.whyt').html($('.why-us').html());
$(".p5").click(function(){
$('.whyt').html($('.why-us').html());
});
$(".p6").click(function(){
$(".nav-wrap span.backer").css({"background":"url('https://searchmgseo.com.au/smg/wp-content/uploads/2015/09/SEO_Icon.png')","z-index":"999"});
$('.whyt').html($('.seo').html());
});
$(".p7").click(function(){
$('.whyt').html($('.ranking').html());
});
$(".p8").click(function(){
$('.whyt').html($('.benefits').html());
});
$(".p9").click(function(){
$('.whyt').html($('.quality').html());
});
$(".p10").click(function(){
$('.whyt').html($('.faq').html());
});
});
.backer { display:block; width:135px; height:129px; position:absolute; left:0; top:0; z-index:-1; }
.nav-wrap { display:block; position:relative; }
.nav-wrap area { display:block; }
.why-img { position:relative; z-index:200; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-wrap"> <span class="backer"></span> <img class="why-img" src="https://searchmgseo.com.au/smg/wp-content/themes/smg/Images/Why_Us.png" alt="" usemap="#map14">
<map id="map14" name="map14">
<area shape="rect" coords="289,8,407,126" title="" alt="" href="#tt1" class="p5">
<area shape="rect" coords="17,18,116,117" title="" alt="" href="#tt1" class="p6">
<area shape="rect" coords="144,201,246,305" title="" alt="" href="#tt1" class="p7">
<area shape="rect" coords="403,283,498,380" title="" alt="" href="#tt1" class="p8">
<area shape="rect" coords="235,403,332,503" title="" alt="" href="#tt1" class="p9">
<area shape="rect" coords="16,403,116,503" title="" alt="" href="#tt1" class="p10">
</map>
</div>
<div class="col-sm-6 whyt"> <a name="tt1"></a> </div>
<div style="display:none;">
<div class="why-us">
<h3>Why Us</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a> </div>
<div class="seo">
<h3>SEO</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a> </div>
<div class="ranking">
<h3>Page 1 Rankings</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a> </div>
<div class="benefits">
<h3>Benefits</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a> </div>
<div class="quality">
<h3>Quality</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a> </div>
<div class="faq">
<h3>FAQ</h3>
<p class="why-text">Search Marketing Group is a leader in creating unique Seo strategies that would help your website rank on page 1 of
Google for your most competitive keywords in your niche. We pride ourself on creating custom solutions for businesses and
making it work for them. </p>
<br/>
<a href="" class="btn-md">Get Quote </a> </div>
</div>关于jquery - 图像 map 上的悬停和单击效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32709425/