jquery - HTML5のイメージマップでイメージテキストの色を変える方法

Question

こんにちは、特定の部分でマウスをロールオーバーすると、画像内のテキストがホバーすると色が変わる画像があります。イメージマップを使用できるコードを適用しました。その領域でマウスを動かすと、青いパッチが表示されます。しかし、それはスムーズに機能していません。画像のテキストの色を変更するにはどうすればよいか教えてください。それは私が使用している正しい方法でもあります。前もって感謝します。

私が使用しているコードは次のとおりです: HTML:

<map id="map1" name="whatever" style="display:none">
        <area id="1" href="#" shape="rect" coords="10,10,200,150" style="border: black 1px solid"/>
    </map>

    <div id="main">
        <div id="rect" style=" position:absolute; background-color:#039; display:none" ></div>
        <img id="tnt"  src="images/image1.png" usemap="#whatever" />
    </div>

JS:

$(window).load(function () {
        var abc = $('#map1');
        var x, y, id_ = "", arr, k = "";
        var ttt = $('#rect').position();
        var tre = $('#tnt').position();
        abc.hover(function (e) {
            id_ = '#' + e.target.id;
            arr = ($(id_).attr('coords')).split(',');
            //alert("hello")
            arr[0] = arr[0] * 1;
            arr[1] = arr[1] * 1;
            $('#rect').css('left', tre.left + arr[0]);
            $('#rect').css('top', tre.top + arr[1]);
            $('#rect').css('width', 185);
            $('#rect').css('height', 160);
            $('#rect').toggle();

            abc.on('click', function (event) {
                $('#rect' + id_.split('#')[1]).css('left', tre.left + arr[0]);
                $('#rect' + id_.split('#')[1]).css('top', tre.top + arr[1]);
                $('#rect' + id_.split('#')[1]).toggle();
            });
        });
});

CSS:

#map a {
    cursor: hand;
}

$('#mapimage').mapster(
    { 
        fillColor: '090'
    });


img:hover {
  border: 5px solid #090;
}

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#03C;
}

#area:hover{
     background:#03C;
}

私が使用しているテスト用の画像は