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 { 
 
\t 
 
} 
 

 
.team-member { 
 
\t display:inline-block; 
 
\t max-width:210px; 
 
\t max-height:150px; 
 
\t 
 
} 
 

 
.team-pic { 
 
\t position:relative; 
 
\t background-color:#99C; 
 
\t 
 
} 
 

 
.transparent-red { 
 
\t position:absolute; 
 
\t color:#fff; 
 
\t background: rgba(142, 0, 0, 0.8); 
 
\t width:210px; 
 
\t text-align:center; 
 
\t height:40px; 
 
\t /* z-index:20; */ 
 
\t top:110px; 
 
} 
 

 
.team-name { 
 
\t line-height:40px; 
 
\t font-size:60%; 
 
\t padding-top:90px; 
 
\t 
 
} 
 

 
.team-title { 
 
\t line-height: 1px; 
 
\t font-size:40%; 
 
\t 
 
} 
 

 

 
/* Tooltip text */ 
 
.team-member .tooltiptext { 
 
    visibility: hidden; 
 
    width: 210px; 
 
    background: rgba(255, 255, 255, 0.9); 
 
    color: #000; 
 
\t font-size:50%; 
 
\t line-height:20px; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
    
 
    /* Position the tooltip text - see examples below! */ 
 
    position: absolute; 
 
    /* z-index: 1; */ 
 
\t top: 100%; 
 
    left: 50%; 
 
    margin-left: -105px; 
 
\t 
 
\t opacity: 0; 
 
    transition: opacity 1s; 
 
\t 
 
} 
 

 

 

 

 
/* Show the tooltip text when you mouse over the tooltip container */ 
 
.team-member:hover .tooltiptext { 
 
    visibility: visible; 
 
\t opacity: 1; 
 
} 
 

 

 
.centre-profiles { 
 

 
\t margin: 0 auto; 
 
    max-width: 1000px; 
 
\t 
 
} 
 

 

 
/******** Code for smaller image with red overlay 210 x 150 ********/ 
 

 
.bg-image-sm { 
 
\t display:inline-block; 
 
\t max-width:210px; 
 
\t max-height:150px; 
 
\t padding-right:15px; 
 
} 
 

 

 
.transparent-maroon { 
 
\t position:absolute; 
 
\t color:#fff; 
 
\t background: rgba(119, 0, 0, 0.8); 
 
\t width:210px; 
 
\t text-align:center; 
 
\t height:40px; 
 
\t /* z-index:20; */ 
 
\t top:110px; 
 
} 
 

 

 
/* Tooltip text */ 
 
.bg-image-sm .tooltiptext-sm { 
 
    visibility: hidden; 
 
    width: 210px; 
 
    background: rgba(255, 255, 255, 0.9); 
 
    color: #000; 
 
\t font-size:50%; 
 
\t line-height:20px; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
\t 
 
\t opacity: 0; 
 
    
 
/* Position the tooltip text - see examples below! */ 
 
    position: absolute; 
 
\t top: 100%; 
 
    left: 50%; 
 
    margin-left: -105px; 
 
\t opacity: 0; 
 
    transition: opacity 1s; 
 
\t z-index: 100 !important; 
 
\t 
 
} 
 

 

 
/* Show the tooltip text when you mouse over the tooltip container */ 
 
.bg-image-sm:hover .tooltiptext-sm { 
 
    visibility: visible; 
 
\t 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>

異常