画像サイズに合わせて吹き出しを表示

画像幅と吹き出し幅から真ん中を抽出し、吹き出しを表示

jQuery

$(function () { $('div.image').hover(function() { var img_width = $(this).children('img').width(); var arrow_width = $(this).children('span').outerWidth(); // (画像幅 - 吹き出し幅) / 2 = 真ん中 var posi_width = (img_width - arrow_width) / 2; $(this).children('span').css('left', posi_width).fadeIn('fast'); }, function() { $(this).children('span').fadeOut('slow'); }); });

CSS

.image { display: inline-block; position: relative; top: 60px; } .arrow_box { display: none; z-index: 1; position: absolute; top: -55px; padding: 16px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; background: #333; color: #fff; white-space: nowrap; } .arrow_box:after { position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -10px; border: solid transparent; border-color: rgba(51, 51, 51, 0); border-top-color: #333; border-width: 10px; pointer-events: none; content: " "; }

HTML

<div class="image"> <img src="/img/thumb.jpg"> <span class="summary">88px × 62px</span> </div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。