將鼠標懸停在當前背景圖像的特定部分上時更改背景圖像

我有2張圖像。開始時有一個背景圖像，但是在圖像上的特定區域懸停時，我想將當前背景圖像更改爲新的背景圖像。怎麼做？？目前懸停發生在圖像的整個區域。如何指定懸停應該發生的圖像的特定尺寸？將鼠標懸停在當前背景圖像的特定部分上時更改背景圖像

.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>

來源

2016-04-30 Sachin Menon

而你並不意味着分割部分成塊的網格，每個有'：hover'風格？ –

你可以把隱藏的div，你希望你的懸停effect.Set高度圖像上（不要設置它的邊框或顏色的任何東西），你想，然後設置寬度多將懸停屬性設置爲該分區。不要忘記將其設置爲絕對位置。它會工作..

來源

2016-04-30 12:24:32

您可以在圖像上使用jquery mouse-over事件：

$('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"); 

    } 
});

來源

2016-04-30 12:37:13

將鼠標懸停在當前背景圖像的特定部分上時更改背景圖像

回答

相關問題