マウスオーバーの吹き出しがテーブルセルに隠れてしまう

マウスオーバーの吹き出しがテーブルセルに隠れてしまう 画像をマウスポイントに吹き出しが表示するタグを書きました。 これを吹き出しがセルに隠れる事無く前面に出るようにしたいです。 タグはこんな感じです。 <style> .cp_tooltip { position: relative; display: inline-block; cursor: pointer; background: linear-gradient(transparent 60%, #f19ec2 60%); } .cp_tooltip .cp_tooltiptext { position: absolute; top: -5px; left: 105%; visibility: hidden; /*width: auto;*/ white-space: nowrap; padding: 0.3em 0.5em; transition: opacity 1s; text-align: center; opacity: 0; color: #ffffff; border-radius: 6px; background-color: #da3c41; } .cp_tooltip .cp_tooltiptext::after { position: absolute; top: 40%; right: 100%; margin-left: -5px; content: ' '; border: 5px solid transparent; border-right-color: #da3c41; } .cp_tooltip:hover .cp_tooltiptext { visibility: visible; opacity: 1; } </style> <table width="100px" style="margin: 0 auto;" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: #fff; padding: 0px; font-size: 0px;" width="50" height="50"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="../sample3.jpg" /> <span class="cp_tooltiptext">コメント</span> </div> </td> <td style="background-color: #fff; padding: 0px; font-size: 0px;" width="50" height="50"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="../sample3.jpg" /> <span class="cp_tooltiptext">コメント</span> </div> </td> </tr> <tr> <td style="background-color: #fff; padding: 0px; font-size: 0px;" width="50" height="50"> <div class="cp_tooltip"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="../sample3.jpg" /> <span class="cp_tooltiptext">コメント</span> </div> </td> <td style="background-color: #fff; padding: 0px; font-size: 0px;" width="50" height="50"> <div class="cp_tooltip"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="../sample3.jpg" /> <span class="cp_tooltiptext">コメント</span> </div> </td> </tr> </table>

HTML、CSS | JavaScript13閲覧

ベストアンサー

0

sir********さん >・・・・吹き出しがセルに隠れる・・・・・・・・・・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <style> .cp_tooltip { position: relative; display: inline-block; cursor: pointer; background: linear-gradient(transparent 60%, #f19ec2 60%); } .cp_tooltip .cp_tooltiptext { z-index:10; /* 追記 */ position: absolute; top: -5px; left: 105%; visibility: hidden; /*width: auto;*/ white-space: nowrap; padding: 0.3em 0.5em; transition: opacity 1s; text-align: center; opacity: 0; color: #ffffff; border-radius: 6px; background-color: #da3c41; } .cp_tooltip .cp_tooltiptext::after { position: absolute; top: 40%; right: 100%; margin-left: -5px; content: ' '; border: 5px solid transparent; border-right-color: #da3c41; } .cp_tooltip:hover .cp_tooltiptext { visibility: visible; opacity: 1; } </style> </head> <body> <table width="100px" style="margin: 0 auto;" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: #fff; padding: 0px; " width="50" height="50"><!-- 修正 以下同様 --> <div class="cp_tooltip"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="https://s.yimg.jp/images/ks/official/nt/grd/prf_48.png" /> <span class="cp_tooltiptext">コメント</span> </div> </td> <td style="background-color: #fff; padding: 0px;" width="50" height="50"> <div class="cp_tooltip"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297558.png" /> <span class="cp_tooltiptext">コメント</span> </div> </td> </tr> <tr> <td style="background-color: #fff; padding: 0px; " width="50" height="50"> <div class="cp_tooltip"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297526.png" /> <span class="cp_tooltiptext">コメント</span> </div> </td> <td style="background-color: #fff; padding: 0px; " width="50" height="50"> <div class="cp_tooltip"> <img alt="" width="50" height="50" class="alignnone size-full wp-image-3446 lazyload" src="https://s.yimg.jp/images/ks/clap/image/category/40/2078297536.png" /> <span class="cp_tooltiptext">コメント</span> </div> </td> </tr> </table> </body> </html>

ThanksImg質問者からのお礼コメント

ありがとうございます。 解決しました。

お礼日時:9/25 22:11

その他の回答(1件)

0

cp_tooltipの表示をhoverでon/offしているようなので、 z-index(表示優先順位)を導入してみればどうでしょう。