自己解決できました。
html
<div class="area_map">
<ul class="pointer_list">
<li>
<a href="http://uu-hokkaido.cedars.jp/index.shtml"><div class="query_btn map_pointer map_pointer01-01" id="sap"></div></a></li>
</ul>
</div>
<div class="area_list">
<ul class="query_list -left">
<li><a href="http://uu-hokkaido.cedars.jp/index.shtml" class="query_btn _btn" role="button" id="sap_aera"> 札幌・小樽・道央 </a></li> </ul>
</div>
jQuery
//札幌エリア
$(function () {
//マウスを乗せたら発動
$('#sap').hover(function () {
//マウスを乗せたら色が変わる
$(this).css('background', 'rgba(233, 30, 99, 0.71)');
$('#sap_aera').css('color', '#E91E63');
//ここにはマウスを離したときの動作を記述
}, function () {
//色指定を空欄にすれば元の色に戻る
$(this).css('background', '');
$('#sap_aera').css('color', '');
});
});
$(function () {
//マウスを乗せたら発動
$('#sap_aera').hover(function () {
//マウスを乗せたら色が変わる
$(this).css('color', '#E91E63)');
$('#sap').css('background', 'rgba(233, 30, 99, 0.71)');
//ここにはマウスを離したときの動作を記述
}, function () {
//色指定を空欄にすれば元の色に戻る
$(this).css('color', '');
$('#sap').css('background', '');
});
});