Question

在site顶部的旋转木马上，我正在使用两种工具提示。第一个是使用这种风格的旋转木马实现的：

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

}

这个用于第二张图片，你甚至看不到它，它的效果应该与左边的旋转木马类似。

请问这些问题有解决方案吗？

Answer 1

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

从此类#carousel div

中删除z-index

并编辑此课程

.tooltip4:hover em {top: -243px;left: -197px;}

Answer 2

我认为问题实际上是您已将span放在div.caroufredsel_wrapper内，该div具有特定的宽度和高度，因此它会在body之外被切断。如果您将范围放在更高的级别（例如header或div#wrapper或{{1}}下），它应该有效。

z-index不适用于我的工具提示

2 个答案: