我正在尝试获得位于 here 的相同结果用户可以将鼠标悬停在右上角的图层图标上，然后 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;顶部:0； left: 0 用于显示的框。示例:https://jsfiddle.net/7vdq89g0/1/
要使悬停在图像右侧无效(因为显示的框会在用户悬停在较宽的框上时触发“悬停”事件)，只需将其设置为可见性:隐藏 并在 悬停 时可见:https://jsfiddle.net/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>关于html - 如何使用鼠标悬停展开/转换 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59726539/