悬停时的图像映射更改另一个 DIV 内容答案

【问题标题】：image map when hover change another DIV content悬停时的图像映射更改另一个 DIV 内容
【发布时间】：2016-12-20 00:57:46
【问题描述】：

我有下面的代码，我的问题是如何在悬停时做一个图像映射（圆形映射）可以改变另一个 DIV 内容？

这是一个例子，这张图片有 5 个圆圈，当我将鼠标悬停在每个圆圈上时，我想在结果 DIV 上显示不同的文本。

$(document).ready(function () {
  if($("#planet").find(".circle1:hover").length){
    $('#result').html('Hoving purple');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<img src ="http://placehold.it/400x400" width="400" height="400" alt="Planets"
     usemap="#planetmap">

<map name="planetmap" id="planet">
  <area shape="circle" coords="107,93,60" class="circle1" alt="purple" title="purple">
  <area shape="circle" coords="288,73,60" class="circle2" alt="red" title="red">
  <area shape="circle" coords="86,272,60" class="circle3" alt="orange" title="orange">
  <area shape="circle" coords="368,222,60" class="circle4" alt="green" title="green">
  <area shape="circle" coords="240,348,60" class="circle5" alt="blue" title="blue">
</map>

<div id="result">not hover</div>

https://jsfiddle.net/wx1q8rfu/

【问题讨论】：

标签： jquery image hover

【解决方案1】：

好的，我发现有一个简单的悬停功能

$(document).ready(function () {



$(".circle1").hover(function(){
      $('#result').html('This is purple');


   });

$(".circle2").hover(function(){
      $('#result').html('This is red');


   });

$(".circle3").hover(function(){
      $('#result').html('This is orange');


   });
$(".circle4").hover(function(){
      $('#result').html('This is green');


   });
$(".circle5").hover(function(){
      $('#result').html('This is blue');


   });







});

【讨论】：