使用css和jquery突出显示产品功能图像

我正在创建一个产品功能页面，突出显示图像的区域和相应的描述。我选择使用div与绝对定位，而不是一个图像映射。我有页面工作，但我的jquery是缺乏的，我想知道最好的方式来写下面的脚本?

$(document).ready(function(){
    $('#feature_1').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $('#feature_1_highlight').css('display', 'inherit');
    });
    $('#feature_1').mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $('#feature_1_highlight').css('display', 'none');
    });
	
	$('#feature_2').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $('#feature_2_highlight').css('display', 'inherit');
    });
    $('#feature_2').mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $('#feature_2_highlight').css('display', 'none');
    });
	
	$('#feature_3').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $('#feature_3_highlight').css('display', 'inherit');
    });
    $('#feature_3').mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $('#feature_3_highlight').css('display', 'none');
    });
	
	$('#feature_4').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $('#feature_4_highlight').css('display', 'inherit');
    });
    $('#feature_4').mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $('#feature_4_highlight').css('display', 'none');
    });
	
	$('#feature_5').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $('#feature_5_highlight').css('display', 'inherit');
    });
    $('#feature_5').mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $('#feature_5_highlight').css('display', 'none');
    });
	
	$('#feature_6').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $('#feature_6_highlight').css('display', 'inherit');
    });
    $('#feature_6').mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $('#feature_6_highlight').css('display', 'none');
    });
});

.features_left, .woocommerce .features_right {
	width:295px;
	height:380px;
	float:left;
	margin-bottom:30px;
}
	.features_heading {
		text-transform:uppercase;
		font-weight:800;
		font-size:.8em;
		width:100%;
		padding-bottom:5px;
	}
	
	.features_desc {
		font-size:.8em;
		width:100%;
		padding-bottom:45px;
		line-height:1.5;
	}
.features_image {
	width:380px;
	height:380px;
	float:left;
	margin:0 20px;
	position:relative;
}
	.features_image img{
		width:380px;
	}
	.feature_highlight {
		position:absolute;
		width: 40px; 
		height: 40px; 
		background: rgba(206,65,37,0.50);
		border:4px solid #CE4125;
		-moz-border-radius: 20px; 
		-webkit-border-radius: 20px; 
		border-radius: 20px;
		z-index:10;
		display:none;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="features_left">
	<div id="feature_1">
		<div class="features_heading highlight">Title 1</div>
 		<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div id="feature_3">
    	<div class="features_heading">Title 3</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div id="feature_5">
    	<div class="features_heading">Title 5</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
</div>
<div class="features_image">
  
    <img src="http://lorempixel.com/300/300/technics" >
        
    <div id="feature_1_highlight" class="feature_highlight" style="top:50px; left:50px;"></div>
    <div id="feature_2_highlight" class="feature_highlight" style="top:150px; left:100px;"></div>
    <div id="feature_3_highlight" class="feature_highlight" style="top:200px; left:50px;"></div>
    <div id="feature_4_highlight" class="feature_highlight" style="top:250px; left:150px;"></div>
    <div id="feature_5_highlight" class="feature_highlight" style="top:50px; left:200px;"></div>
    <div id="feature_6_highlight" class="feature_highlight" style="top:150px; left:150px;"></div>
</div>
<div class="features_right">
	<div id="feature_2">
		<div class="features_heading">Title 2</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div id="feature_4">
    	<div class="features_heading">Title 3</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
    <div id="feature_6">
    	<div class="features_heading">Title 4</div>
    	<div class="features_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    </div>
</div>

我包括了HTML和CSS作为参考。最好全屏观看。(图像是随机生成的，所以谁知道你会得到什么!)