如何在悬停时显示 PNG 图层

Question

我想实现类似的东西

http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\图片\卧室/产品/-1

和另一个样本

http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\图像\Family_Room/产品/-1，-1，-1，-1，-1，-1

但我已经做的是：

请运行代码段

当您将鼠标悬停在菜单栏上时，图像上显示的项目。

我在地板上放了一个基本图像并堆叠了几个 PNG。 对于基于菜单的悬停，这很好。但是，如果我们想要另一种方式，我的意思是，如果用户将鼠标悬停在图像元素上(或单击(，我希望将相关菜单项设置为"活动"。

我们如何实现当用户将鼠标悬停在图像的某些部分时，菜单项设置为活动状态而没有地图区域标签？

$('.selector').hover(function() {
 var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).show();
},function() {
 var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).hide();
});

.visualizer > img{
    position: absolute;
    }
    
.visualizer > .hover-layer{
    z-index: 1000;
    display:none;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="container">
    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Categories</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="selector" ><a href="#" class="all" >All</a></li>
      <li class="selector"><a href="#" class="intercom" >interom</a></li>
      <li class="selector"><a href="#" class="powerpoint">powerpoint</a></li>
    </ul>
  </div>
</nav>
          <h2 class="h2" >Sample Visualizer By Yusef</h2>
    <div class="visualizer">
    <img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
        <img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
              <img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
    </div>
      </div>

Answer 1

您可以通过添加自定义位置 CSS 来实现所需的功能。我只是更新您的代码片段，希望对您有所帮助。谢谢

jQuery

$('.image-overlay').hover(function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').show();
},function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').hide();
});

.CSS

#powerpoint-hover-container {
  position: absolute;
  left: 430px;
  top: 271px;
  width: 38px;
  height: 29px;
  z-index: 1001;
}
#intercom-hover-container {
  position: absolute;
  right: 366px;
  top: 270px;
  width: 20px;
  height: 13px;
  z-index: 1001;
}

.HTML

<div id="intercom-hover-container" class="image-overlay">
  <span class="intercom"></span>
</div>
<div id="powerpoint-hover-container" class="image-overlay">
  <span class="powerpoint"></span>
</div>

$('.selector').hover(function() {
var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).show();
},function() {
var classItem = $(this).children('a').attr('class');
  $('.visualizer > .'+ classItem).hide();
});
$('.image-overlay').hover(function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').show();
},function() {
  var overlayClass = '.' + $(this).children().attr('class');
  $(overlayClass + '.hover-layer').hide();
});

.visualizer {
  position: relative;
}
.visualizer > img{
  position: absolute;
}
.visualizer > .hover-layer{
  z-index: 1000;
  display:none;
}
#powerpoint-hover-container {
  position: absolute;
  left: 430px;
  top: 271px;
  width: 38px;
  height: 29px;
  z-index: 1001;
}
#intercom-hover-container {
  position: absolute;
  right: 366px;
  top: 270px;
  width: 20px;
  height: 13px;
  z-index: 1001;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">Categories</a>
      </div>
      <ul class="nav navbar-nav">
        <li class="selector"><a href="#" class="all" >All</a></li>
        <li class="selector"><a href="#" class="intercom">interom</a></li>
        <li class="selector"><a href="#" class="powerpoint">powerpoint</a></li>
      </ul>
    </div>
  </nav>
  <h2 class="h2" >Sample Visualizer By Yusef</h2>
  <div class="visualizer">
    <div id="intercom-hover-container" class="image-overlay">
      <span class="intercom"></span>
    </div>
    <div id="powerpoint-hover-container" class="image-overlay">
      <span class="powerpoint"></span>
    </div>
    <img src="https://i.stack.imgur.com/rPXyU.png" class="base" />
    <img src="https://i.stack.imgur.com/64bLa.png" class="hover-layer intercom all" />
    <img src="https://i.stack.imgur.com/QLoXM.png" class="hover-layer powerpoint all" />
  </div>
</div>