現在の背景画像の特定の部分にホバリングして背景画像を変更します

Question

私は2枚の画像を持っています。最初は1つの背景画像がありますが、画像上の特定の領域にホバリングすると、現在の背景画像を新しい画像に変更したいと考えています。どうやってするか？？ 現在、ホバーは画像の全領域で発生します。ホバーが起こるはずの画像の特定の寸法を指定するにはどうすればいいですか？

.bground { 
 
\t width:100%; 
 
\t position:relative; 
 
\t background: url(../img/bg1.jpg) no-repeat top center; 
 
\t -webkit-transition-property: background; 
 
\t -webkit-transition-duration: 2s; 
 

 
} 
 

 
.bground:hover { 
 
background: url(../img/bg2.jpg) no-repeat top center; 
 
}

<section id="bground" class="bground"> 
 
    <div class="display"> 
 
    <img src="img/logo.png" alt="Logo"> 
 
    </div> 
 
    <div class="page-scroll"> 
 
    <a href="#about" class="btn btn-circle" style="color:#000000"> 
 
     <i class="fa fa-angle-double-down animated"></i> 
 
    </a> 
 
    </div> 
 
</section>

Answer 1

あなたは同じくらいあなたが欲しいし、その後設定あなたのホバーeffect.Set高さと幅をしたい画像の上に（その境界線や色のものを設定していない）隠されたdiv要素を置くことができますそのdivにプロパティをホバリングしないでください。絶対的な位置にすることを忘れないでください。それはあなたが画像上にjqueryのmouse-overイベントを使用することができます

Answer 2

..うまくいく：

$('div.display img').mouseover(function(){ 
    // Specify the area here 
    if ($(this).offset().left >= 50 && $(this).offset().top >= 50 && $(this).offset().left <=100 && $(this).offset().top <= 100) { 
     $(this).css("background", "url(../img/bg2.jpg) no-repeat top center"); 
    } else { 
     $(this).css("background", "url(../img/bg1.jpg) no-repeat top center"); 

    } 
});