Question

我有2张图片。一开始有一个背景图像，但是当悬停在图像上的特定区域时，我想将当前背景图像更改为新图像。怎么做？？目前，悬停发生在图像的整个区域。如何指定悬停应该发生的图像的特定尺寸？

.bground {
	width:100%;
	position:relative;
	background: url(../img/bg1.jpg) no-repeat top center;
	-webkit-transition-property: background;
	-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

您可以将隐藏的div（不要设置其边框或颜色任何东西）放在您想要悬停效果的图像上。设置您想要的高度和宽度，然后将悬停属性设置为该div ..Don＆＃39;忘记让它的位置绝对。它会工作..

Answer 2

您可以在图片上使用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");

    }
});

在悬停到当前背景图像的特定部分时更改背景图像

2 个答案: