html - 如何使用鼠标悬停扩展/转换 div?
问题描述
我正在尝试获得与此处相同的结果,用户可以将鼠标悬停在右上角的图层图标上,并且 div 会扩展/转换信息。
我创建了两个 div,一个用于图标,一个用于信息,但我不确定如何创建鼠标悬停效果。
如果有人有兴趣帮助我,这是我的 JSFiddle。谢谢!https://jsfiddle.net/prime90/vwqs38gL/20/
HTML
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
</div>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
CSS
.icon{
height: 48px;
width: 48px;
}
.img{
width:48px;
height:48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background:#f5f5f5;
font-size: 14px;
}
解决方案
你可以.card-body
在里面移动.icon
并拥有
.icon:hover .card-body {
opacity: 1;
}
示例:https ://jsfiddle.net/7vdq89g0/
要覆盖图像,请使用positive: relative
容器和position: absolute; top: 0; left: 0
显示的框。示例:https ://jsfiddle.net/7vdq89g0/1/
要使悬停在图像右侧无效(因为显示的框会在用户悬停在更宽的框上时触发“悬停”事件),只需将其visibility: hidden
设置为何visible
时hover
:https://jsfiddle。净/7vdq89g0/2/
.icon {
height: 48px;
width: 48px;
position: relative;
}
.img {
width: 48px;
height: 48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background: #f5f5f5;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s;
width: 200px;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
/* display: none */
}
.card-header {
text-align: center;
}
.icon:hover .card-body {
opacity: 1;
visibility: visible;
/* display: block; */
}
.layer-text {
display: block;
text-indent: 40px;
}
.btn {
color: #f5f5f5 !important;
}
.layer-fill {
float: left;
width: 25px;
height: 15px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
position: absolute;
}
.one-mile {
background: #76d7c4;
opacity: .5;
}
.half-mile {
background: #f7dc6f;
opacity: .5;
}
.onehun-yrds {
background: #ec7063;
opacity: .5;
}
/* line icons for legend */
.layer-line {
border: 0;
width: 25px;
height: 1px;
cursor: pointer;
margin-top: 11px;
margin-left: 5px;
display: inline-block;
position: absolute;
}
.tracks {
background-color: #000;
}
.hclanes {
background-color: #3498db;
height: 2px;
}
.lclanes {
background-color: #3498db;
}
.paved {
background-color: #138d75;
height: 2px;
}
.natural {
/*10px color then 2px transparent -> repeat this for dash lines!*/
background: repeating-linear-gradient(to right, #138d75 0, #138d75 11px, transparent 11px, transparent 14px)
}
<!DOCTYPE html>
<html>
<body>
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
<b>Bike Lane Layers</b>
<div class='bike-layer-options'>
<div class="layer-line hclanes"></div>
<span class="layer-text">High Comfort Lanes<br></span>
<div class="layer-line lclanes"></div>
<span class="layer-text">Low Comfort Lanes<br></span>
</div>
<b>Multiuse Trail Layers</b>
<div class='bike-layer-options'>
<div class="layer-line paved"></div>
<span class="layer-text">Paved Trails<br></span>
<div class="layer-line natural"></div>
<span class="layer-text">Natural Trails<br></span>
</div>
</div>
</div>
</body>
</html>
推荐阅读
- excel - 如何使用大于 24 小时的时间格式?
- python - 你可以在 gitlab 管道中存储一个值,以便以后的管道可以访问它吗?
- html - 如何将复选框绑定到Angular7中的字符串值?
- python - 增加 Pytorch 中显示的图像大小
- javascript - Vue JS如何根据数组值删除对象
- c# - 如何在 C# 中执行具有多个外参数的存储过程
- excel - Excel VBA - 打印现有的 PDF 文件,然后在打印时删除
- java - oracle 中的同义词视图和表
- python - 放入批处理脚本时Python文件未运行
- android - 我可以在 Android 中自定义通知区域吗?