0
私はシンプルなCSSとHTMLのツールチップを使って作業しています。レイアウトの一般的な要点は、行の中にいくつかの行の画像があることです。各画像にはテキストとツールチップがあります。マウスが画像の上を回転すると、ツールチップが表示されます。問題は、ツールヒントリストがマウスオーバーがツールヒントリストの最後まで伸びていない場合に表示されます。現在開いているリストが下の行のイメージと重なっている場合は、マウスを下に動かすと現在のツールチップが消えます。あなたが最初の画像をロールオーバーした場合https://jsfiddle.net/kxskzrsr/CSSツールヒントオーバーラップ問題
ツールチップの一覧が表示されます。
は、ここで私が話しているかのJSFiddleをです。ツールチップリストの一番下までスクロールしようとすると、現在のツールチップに開いたままではなく、下のイメージのツールチップが切り取られて開きます。
.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>
それはすごくうまくいった! ありがとうございました。 – user8167594