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

Question

我正在创建一个产品功能页面，突出显示图像区域和相应的描述。我选择使用具有绝对定位的 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 以供引用。最好全屏观看。 (图像是随机生成的，所以谁知道你会得到什么!)

Answer 1

我会这样做。

因为，当鼠标悬停时，您想要突出显示某个特定功能，并且您知道哪个元素应该突出显示哪些功能。我会将目标功能的 id 添加为数据属性的一部分，如下所示。

<div class="features_left">
    <div class="feature" data-highlight="#feature_1_highlight">
        <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 class="feature" data-highlight="#feature_2_highlight">
        <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 class="feature" data-highlight="#feature_3_highlight">
        <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 class="feature" data-highlight="#feature_4_highlight">
        <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 class="feature"  data-highlight="#feature_5_highlight">
        <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 class="feature" data-highlight="#feature_6_highlight">
        <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>

现在我的 javascript 将如下所示。

$(document).ready(function(){
    $('.feature').mouseover(function(){
        $(this).find('.features_heading').css('color', '#CE4125');
        $($(this).attr("data-highlight")).css('display', 'inherit');
    }).mouseout(function(){
        $(this).find('.features_heading').css('color','#56534F');
        $($(this).attr("data-highlight")).css('display', 'none');
    });
});

JSFiddle