Question

我是一名插画家，负责建立我的第一个投资组合网站。

要注释我的插图当我将鼠标悬停在图像上时，我会隐藏带有文字的气泡，这可以在demo（前两个区块）中看到

然而，语音气泡总是在它们下方的图像下面。

下面的图片也有CSS影响，放大了它们，我不确定这是否会以任何方式影响语音泡泡类。

如果有人可以向我指出我错过的代码，使语音气泡出现在所有内容之上，那将非常有用！

HTML：

<div id="wrapper2">

<div id="container"><a href="#" class="hoverbubble">Hover over me!<span>Hidden message here. Hidden message here. Hidden message here. Hidden message here. Hidden message here.Hidden message here. Hidden message here.Hidden message here.Hidden message here.</span></a></div>

<div id="container"><a href="#" class="hoverbubble"><img src="http://placekitten.com/180/160" class="hoverbubble"/><span>Hidden message here. Hidden message here. Hidden message here. Hidden message here. Hidden message here.Hidden message here. Hidden message here.Hidden message here.Hidden message here.</span></a></div>

 <div id="bottem"><div class="scale scaleMe" id="container"></div><div class="scale scaleMe" id="container"></div>

</div>
</div>

课程的CSS＆＃34; hoverbubble＆＃34;

a.hoverbubble {
text-decoration: none;
}
a.hoverbubble span {
display: none;
position: absolute;
left: 0%;
top: 40%;
}
a.hoverbubble:hover span {
display: block;
position: absolute;
content: attr(title);
min-width: px;
width: 180px;
height: 100px;
top: 180px;
background: rgba(0,0,0,.8);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
color: #fff;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
padding: 10px;
}
a.hoverbubble:hover span:after {
position: absolute;
display: block;
content: "";
height: 0;
width: 0;
position: absolute;
bottom: 120px;
left: 90px;
border-top-width: 10px;
border-right-width: 10px;
border-bottom-width: 10px;
border-left-width: 10px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: rgba(0,0,0,.8);
border-left-color: transparent;
}

课程的CSS＆＃34;比例＆＃34;

.scale {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;   
}
.scaleMe:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-box-shadow: 3px 3px 3px #666666;
-moz-box-shadow: 3px 3px 3px #666666;
-o-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;
z-index: 1;
}

Answer 1

尝试将z-index: 5添加到a.hoverbubble:hover span

隐藏的语音泡沫CSS效果在其他框下面

1 个答案: