我有动态数据'ul'。里面的每个列表都有一个用户图像,当你将鼠标悬停在图像上时,会在'ul'的左侧显示一个信息框。
当我将'ul'设置为溢出时:滚动,将删除“ul”之外的信息框部分。
这是css代码:
.popUpRSVPList{
padding-left:0px;
overflow-y: scroll;
height: 70%;
position: relative;
}
.hoverToShowInfo{
position: relative;
}
.hoverToShowInfo .infoinfo {
display: none;
}
.hoverToShowInfo:hover .infoinfo {
position:absolute;
left:-280px;
top: -60px;
display:block;
z-index: 10;
top: 100%;
}
这是html代码:
<ul class="popUpRSVPList" >
<li style="padding-left:20px;">
<a class="hoverToShowInfo" href="">
<!--Left Info Box, will show on hover-->
<div class="col-sm-12 infoinfo" >
</a>
</li>
</ul>
更新 我设置overflow-y的原因:滚动;是我需要ul可滚动,因此当有数百个数据时,'ul'列表将短于屏幕,用户可以在其中滚动查看每个列表。
这是一个jsfiddle链接:https://jsfiddle.net/7gr7jvvh/ 请取消注释overflow-y:滚动。你会看到差异。
答案 0 :(得分:0)
看看给定的jsfiddle代码希望你想要这个东西:
.popUpRSVPList li { background: white; list-style-type:none; padding:12px 15px; color: black;}
.popUpRSVPList li:nth-child(odd) { background: rgba(241,242,242,1); }
.popUpRSVPList{
padding-left:0px;
/* overflow-y: scroll;*/
height: 70%;
position: relative;
}
.hoverToShowInfo{
position: relative;
}
.hoverToShowInfo .infoinfo {
display: none;
}
.infoinfo div{
width:270px;
}
.hoverToShowInfo:hover .infoinfo {
position:absolute;
left:0px;
top: -60px;
display:block;
z-index: 10;
top: 100%;
height: 100px;
overflow-y: scroll;
}
span.rightNames {
color: white;
}
.infoBoxFirstLine{
background:rgba(49,66,84,1);
min-height:auto;
max-width:270px;
padding:12px 15px;
}
<ul class="popUpRSVPList" >
<li style="padding-left:20px;">
<a class="hoverToShowInfo" href="">
&User Name
<!--Left Info Box, will show on hover-->
<div class="col-sm-12 infoinfo" >
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
</div>
</a>
</li>
</ul>