代码之家 › 专栏 › 技术社区 › Yuseferi

如何在悬停状态下显示PNG图层

css html jquery javascript

-1

Yuseferi · 技术社区 · 6 年前

我想实现这样的功能

http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Bedroom/products/-1

还有另一个样本

http://blindstogo.chameleonpower.com/#/scene/Blinds_To_Go\Images\Family_Room/products/-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>

0 回复 | 直到 6 年前

Hassan Siddiqui 6 年前

您可以通过添加 自定义位置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>