CSS 工具提示重叠问题

Question

我正在使用一个简单的CSS和HTML工具提示。布局的一般要点是连续有许多图像，其中有几行这些图像。每个图像都有一些文本和一个工具提示。当鼠标悬停在图像上时，将显示工具提示。问题是当工具提示列表出现时，鼠标悬停不会扩展到工具提示列表的底部。如果当前打开的列表与下面下一行中的图像重叠，则当您向下滚动鼠标时，当前工具提示将消失。

这是我正在谈论的JSFiddle：https://jsfiddle.net/kxskzrsr/

如果将鼠标悬停在第一个图像上，将出现工具提示列表。如果您尝试滚动到工具提示列表的底部，它将剪切并打开下图的工具提示，而不是在当前工具提示中保持打开状态。

.centre-profiles {
    margin: 0 auto;
    max-width: 1000px; 
}
.team-pic { 
    position:relative;
    background-color:#99C; 
}
.team-name {
    line-height:40px;
    font-size:60%;
    padding-top:90px;
}
.bg-image-sm {
    display:inline-block;
    max-width:210px;
    max-height:150px;
    padding-right:15px;
}
.transparent-maroon  {
    position:absolute;
    color:#fff;
    background: rgba(119, 0, 0, 0.8);
    width:210px;
    text-align:center;
    height:40px;
    z-index:20;
    top:110px;
}
/* Tooltip text */
.bg-image-sm .tooltiptext-sm {
    visibility: hidden;
    width: 210px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    font-size:50%;
    line-height:20px;
    text-align: center;
    padding: 5px 0;
    opacity: 0;
/* Position the tooltip text - see examples below! */
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -105px;
    opacity: 0;
    transition: opacity 1s;
    z-index: 1;
}
/* Show the tooltip text when you mouse over the tooltip container */
.bg-image-sm:hover .tooltiptext-sm {
    visibility: visible;
    opacity: 1;
}

<div class="centre-profiles">
  <div class="bg-image-sm">
    <div class="team-pic">
      <img src="images/bg1.jpg" width="210" height="150">
      <div class="transparent-maroon">
        <span class="team-name">Name</span><br>
        <span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text Last<br />
Tooltip text<br /></span>
      </div>
    </div>
  </div>
  <div class="bg-image-sm">
    <div class="team-pic">
      <img src="images/bg1.jpg" width="210" height="150">
      <div class="transparent-maroon">
        <span class="team-name">Name</span><br>
        <span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
      </div>
    </div>
  </div>
  <div class="bg-image-sm">
    <div class="team-pic">
      <img src="images/bg1.jpg" width="210" height="150">
      <div class="transparent-maroon">
        <span class="team-name">Name</span><br>
        <span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
      </div>
    </div>
  </div>
  <div class="bg-image-sm">
    <div class="team-pic">
      <img src="images/bg1.jpg" width="210" height="150">
      <div class="transparent-maroon">
        <span class="team-name">Name</span><br>
        <span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
      </div>
    </div>
  </div>
  <div class="bg-image-sm">
    <div class="team-pic">
      <img src="images/bg1.jpg" width="210" height="150">
      <div class="transparent-maroon">
        <span class="team-name">Name</span><br>
        <span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
      </div>
    </div>
  </div>
  <div class="bg-image-sm">
    <div class="team-pic">
      <img src="images/bg1.jpg" width="210" height="150">
      <div class="transparent-maroon">
        <span class="team-name">Name</span><br>
        <span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text Last<br />Tooltip text<br />
</span>
      </div>
    </div>
  </div>

Answer 1

这现在应该可以工作，从 css 中删除所有 z 索引，除了.bg-image-sm .tooltiptext-sm

https://jsfiddle.net/kxskzrsr/3/

@charset "utf-8";
/* CSS Document */
.team-row {
	
}
.team-member {
	display:inline-block;
	max-width:210px;
	max-height:150px;
	
}
.team-pic {
	position:relative;
	background-color:#99C;
	
}
.transparent-red  {
	position:absolute;
	color:#fff;
	background: rgba(142, 0, 0, 0.8);
	width:210px;
	text-align:center;
	height:40px;
	/* z-index:20; */
	top:110px;
}
.team-name {
	line-height:40px;
	font-size:60%;
	padding-top:90px;
	
}
.team-title {
	line-height: 1px;
	font-size:40%;
	
}
/* Tooltip text */
.team-member .tooltiptext {
    visibility: hidden;
    width: 210px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
	font-size:50%;
	line-height:20px;
    text-align: center;
    padding: 5px 0;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    /* z-index: 1; */
	top: 100%;
    left: 50%;
    margin-left: -105px;
	
	opacity: 0;
    transition: opacity 1s;
	
}

/* Show the tooltip text when you mouse over the tooltip container */
.team-member:hover .tooltiptext {
    visibility: visible;
	opacity: 1;
}
.centre-profiles {
	margin: 0 auto;
    max-width: 1000px; 
	
}
/********  Code for smaller image with red overlay 210 x 150 ********/
.bg-image-sm {
	display:inline-block;
	max-width:210px;
	max-height:150px;
	padding-right:15px;
}
.transparent-maroon  {
	position:absolute;
	color:#fff;
	background: rgba(119, 0, 0, 0.8);
	width:210px;
	text-align:center;
	height:40px;
	/* z-index:20; */
	top:110px;
}
/* Tooltip text */
.bg-image-sm .tooltiptext-sm {
    visibility: hidden;
    width: 210px;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
	font-size:50%;
	line-height:20px;
    text-align: center;
    padding: 5px 0;
	
	opacity: 0;
 
/* Position the tooltip text - see examples below! */
    position: absolute;
	top: 100%;
    left: 50%;
    margin-left: -105px;
	opacity: 0;
    transition: opacity 1s;
	z-index: 100 !important;
	
}
/* Show the tooltip text when you mouse over the tooltip container */
.bg-image-sm:hover .tooltiptext-sm {
    visibility: visible;
	opacity: 1;
}

<div class="centre-profiles">
<div class="bg-image-sm"><div class="team-pic">
<img src="images/bg1.jpg" width="210" height="150">
<div class="transparent-maroon">
<span class="team-name">Name</span><br>
<span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text Last<br />
Tooltip text<br /></span>
</div></div></div>
<div class="bg-image-sm"><div class="team-pic">
<img src="images/bg1.jpg" width="210" height="150">
<div class="transparent-maroon">
<span class="team-name">Name</span><br>
<span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
</div></div></div>
<div class="bg-image-sm"><div class="team-pic">
<img src="images/bg1.jpg" width="210" height="150">
<div class="transparent-maroon">
<span class="team-name">Name</span><br>
<span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
</div></div></div>
<div class="bg-image-sm"><div class="team-pic">
<img src="images/bg1.jpg" width="210" height="150">
<div class="transparent-maroon">
<span class="team-name">Name</span><br>
<span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
</div></div></div>
<div class="bg-image-sm"><div class="team-pic">
<img src="images/bg1.jpg" width="210" height="150">
<div class="transparent-maroon">
<span class="team-name">Name</span><br>
<span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br /></span>
</div></div></div>
<div class="bg-image-sm"><div class="team-pic">
<img src="images/bg1.jpg" width="210" height="150">
<div class="transparent-maroon">
<span class="team-name">Name</span><br>
<span class="tooltiptext-sm">Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text Last<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text<br />
Tooltip text<br />Tooltip text Last<br /></span>
</div></div></div>
</div>