javascript - 如何在悬停时显示 PNG 图层
问题描述
我想实现类似的东西
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>
解决方案
您可以通过添加自定义位置 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>
推荐阅读
- c# - 为什么 webjobs api 总是返回“已接受”状态而不是 200 Ok
- c# - ASP.Net Core - 如何向默认 Microsoft 标识结构添加新字段
- java - java静态地图不会在其他类中更新
- ios - 垂直翻转图像(Swift)
- python - 以特定方式对文件进行排序
- php - 如何使用 Google Indexing API 发送批处理请求
- rest - 通过 HTTPS 使用 CRM 365 本地 Web Api
- sql-server - 触发器内的服务代理调用以排队数据作为参数的链接服务器存储过程
- javascript - JS点击事件和'this'项目
- wakanda - 4D 中 __STAMP 列的目的是什么?