1
我正在創建一個產品功能頁面，該頁面突出顯示圖像區域和相應的描述。我選擇使用絕對定位的div，而不是圖像地圖。我有頁面工作，但我的jQuery缺乏，我想知道寫下面的腳本的最佳方式？用css和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');
});
\t
\t $('#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');
});
\t
\t $('#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');
});
\t
\t $('#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');
});
\t
\t $('#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');
});
\t
\t $('#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 {
\t width:295px;
\t height:380px;
\t float:left;
\t margin-bottom:30px;
}
\t .features_heading {
\t \t text-transform:uppercase;
\t \t font-weight:800;
\t \t font-size:.8em;
\t \t width:100%;
\t \t padding-bottom:5px;
\t }
\t
\t .features_desc {
\t \t font-size:.8em;
\t \t width:100%;
\t \t padding-bottom:45px;
\t \t line-height:1.5;
\t }
.features_image {
\t width:380px;
\t height:380px;
\t float:left;
\t margin:0 20px;
\t position:relative;
}
\t .features_image img{
\t \t width:380px;
\t }
\t .feature_highlight {
\t \t position:absolute;
\t \t width: 40px;
\t \t height: 40px;
\t \t background: rgba(206,65,37,0.50);
\t \t border:4px solid #CE4125;
\t \t -moz-border-radius: 20px;
\t \t -webkit-border-radius: 20px;
\t \t border-radius: 20px;
\t \t z-index:10;
\t \t display:none;
\t }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="features_left">
\t <div id="feature_1">
\t \t <div class="features_heading highlight">Title 1</div>
\t \t <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">
\t <div class="features_heading">Title 3</div>
\t <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">
\t <div class="features_heading">Title 5</div>
\t <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">
\t <div id="feature_2">
\t \t <div class="features_heading">Title 2</div>
\t <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">
\t <div class="features_heading">Title 3</div>
\t <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">
\t <div class="features_heading">Title 4</div>
\t <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。最好查看全屏。 （圖片是隨機生成的，所以誰知道你會得到什麼！）