0

在我网站顶部的轮播中,我使用了两种工具提示。第一个是使用这种风格的轮播实现的:

  #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;    
}

这个用在第二张图上,你连看都看不到,应该有类似左边轮播的效果。

请问有解决这些问题的办法吗?

4

2 回答 2

1
#carousel div:hover span,#carousel div.hover span {margin: 0 0 0 -90px;}

从此类中删除 z-index#carousel div

并编辑这个类

.tooltip4:hover em {top: -243px;left: -197px;}
于 2013-07-09T06:57:44.637 回答
0

我认为问题实际上是你已经将你span放在div.caroufredsel_wrapper其中有特定的宽度和高度,所以它被切断了div。如果您将跨度放置在更高的级别(例如 underbody或 may headeror div#wrapper),它应该可以工作。

于 2013-07-09T05:51:36.360 回答