html - 悬停在 div 之外的跨度上的图像选项
问题描述
我正在创建一个查询列表,当悬停时会显示图像。
我尝试在多个 div 上更改 z-index,将位置从相对更改为绝对,反之亦然。
.naglowek2 {
color: #ffffff;
font-family: 'Lato', sans-serif;
font-size: 18px;
padding-top: 10px;
text-align: center;
cursor: pointer;
}
.naglowekbox2 {
background-color: #c34f3f;
padding: 10px;
margin: 0px;
left: 0px;
top: 0px;
max-width: 1000px;
border-top: 2px dashed #751b1b;
border-left: 2px dashed #751b1b;
border-right: 2px dashed #751b1b;
-webkit-box-shadow: 0px 0px 14px 3px #000000;
-moz-box-shadow: 0px 0px 14px 3px #000000;
box-shadow: 0px 0px 14px 3px #000000;
text-shadow: 1px 0 0 #000000, -1px 0 0 #000000, 0 1px 0 #000000, 0 -1px 0 #000000, 1px 1px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000;
}
.naglowekboxinner2 {
background-color: #303030;
padding-left: 5px;
padding-top: 4px;
padding-right: 5px;
padding-bottom: 0px;
margin: auto;
max-width: 450px;
text-align: left;
color: #ffffff;
}
/* 08 */
.category-textzd1 {
font-size: 16px;
color: #ffffff;
}
.desc-togglezd1 {
font-size: 20px;
cursor: pointer;
}
#togglezd1-1 {
display: none;
}
.category-descriptionzd1 {
height: 0px;
/* we start animation from 0px */
overflow: hidden;
/* without this the contents will be
* visible regardless of height */
transition: height 0.5s ease-in;
/* transition has to be defined on base state of element */
background-color: #303030;
/* make transition easier to observe */
}
input[type=checkbox]:checked~.category-descriptionzd1 {
height: 150px;
/* change height when input is checked */
}
/* 08 Koniec */
.hover_imgzdself {
display: inline-block;
}
.hover_imgzdself a {
position: relative;
cursor: help;
padding: 0;
margin: 0;
}
.hover_imgzdself a span {
position: absolute;
display: none;
top: 0px;
left: 0px;
width: 200px;
height: 100px;
border: 1px solid #000000;
background-color: #c1c1c1;
}
.hover_imgzdself a:hover span {
display: block;
z-index: 100;
}
<center>
<div class='naglowekbox2'>
<div class='row'>
<div class='col-lg-12'>
<p class='naglowek2'>H1/H2:</p>
</div>
</div>
<div class='row'>
<div class='col-lg-6 naglowekboxinner2'>
<center>
<label class="desc-togglezd1" for="togglezd1-1">List</label>
</center>
<input type="checkbox" id="togglezd1-1">
<div class="category-descriptionzd1">
<p class="category-textzd1">
<div class='hover_imgzdself'>
<a>Picture One
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture Two
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture One
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture Two
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture One
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture Two
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture One
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture Two
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture One
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
<div class='hover_imgzdself'>
<a>Picture Two
<span>
<img src='03_menu/08_nowa_postac/02_zdolnosci/.png' />
</span>
</a>
</div>
;
</p>
<center>
<label class="desc-togglepo1" style='font-size: 14px;' for="togglezd1-1">Zwiń</label>
</center>
<input type="checkbox" id="togglezd1-1">
</div>
</div>
</div>
<div style='height: 10px;'></div>
</div>
</center>
当您单击“列表”时,它会打开一个选项列表。这个想法是,当您悬停其中一个选项时,它应该显示 200x100 像素的图片。但是,如果您转到最右侧的选项,这些图片并没有完全显示,因为它们被剪切到列表框的大小。
解决方案
发生这种情况是因为overflow: hidden
in .category-descriptionzd1
。如果我删除它,它对我有用。
推荐阅读
- javascript - 如何在 ngFor 循环 [Angular] 中制作可扩展的表格行?
- python - django 查询中的“as_”是什么意思?
- google-drive-api - Google Drive Api Stream 大文件 (>25MB)
- java - 具有浮点和字节的交错式 VBO
- c# - xaml - 如何指定使用哪个 ContentTemplateSelector?
- entity-framework - 如何在 Pascal Case 中生成类和属性名称,同时从 Oracle 数据库生成 EF DB First 类
- python - 预期目标大小 (50, 88),得到 torch.Size([50, 288, 88])
- python - python循环遍历元组列表并创建字典列表
- python - Python,人类可读到字节的转换
- javascript - 我的 API 服务不断陷入错误情况 - AngularJS