在我网站顶部的轮播中,我使用了两种工具提示。第一个是使用这种风格的轮播实现的:
#carousel div:hover span,
#carousel div.hover span {
background-color: #333;
color: #fff;
display: inline-block;
width: 500px;
padding: 2px 0;
margin: 0 0 0 -500px;
position: absolute;
bottom: 0;
left: 50%;
border-radius: 3px;
z-index: 600 !important;
}
这是灰色框,正如您在第一张图片中看到的那样,如果它越过包装器 div,它将切断它。即使我使用的是 z-index。
第二个是使用“tooltip4”类的:
.tooltip4:hover em {
z-index: 600;
text-align: center;
font-style: normal;
display: block;
position: absolute;
top: 50px;
left: 50px;
padding: 5px;
color: #fff;
/*border: 1px solid #bbb;*/
background-color:rgba(16,110,99,0.9);
box-shadow: 0 0 7px 2px #1B8478;
width:400px;
}
这个用在第二张图上,你连看都看不到,应该有类似左边轮播的效果。
请问有解决这些问题的办法吗?