这是我能做的最好的。唯一的限制是只能有一行文本。但是,您可以很容易地将其转换为做一些不同的事情,例如在内部生成一个占图像宽度 80% 的 div,并将该 div 居中以允许段落文本。
底部的 JSBin 示例。
CSS
.vpbutton {
padding:4px;
background-color:#EFEFEF;
}
.userbox img{
padding:8px;
background-color:#EFEFEF;
border:1px solid #e5e5e5;
}
.userbox img:hover{
opacity:.2;
}
.hover-text {
display:none;
position:absolute;
}
.userbox img:hover ~ .hover-text {
border:1px solid #000;
top:0;
left:0;
display: block;
text-align:center;
}
JS
$(function() {
$('img[rel="hover-text"]').each(function () {
this$ = $(this)
console.log((this$.outerWidth() - this$.innerWidth()))
this$.parent().find('.hover-text').css({
'margin': (this$.outerWidth(true) - this$.width())+'px',
'top':0,
'left':0,
'height': (this$.height())+'px',
'width': (this$.width())+'px',
'line-height':(this$.height())+'px'
})
})
})()
HTML
<div class="userbox">
<img src='http://www.clonescriptsdb.com/scriptimages/inout-search-engine-google-like-search-engine-788.jpg' rel="hover-text">
<div class="hover-text">asd</div>
</div>
http://jsbin.com/azuyol/13/edit
更新以正确考虑边距/填充/边框。