ホバーが別のDIVコンテンツを変更したとき

Question

私は以下のコードを持っています。私の質問は、別の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/

Answer 1

[OK]を、私は簡単にホバー機能

$(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'); 


    }); 







}); 

があることが分かりました