我需要显示在图像的顶部一个div：悬停

Question

.vpbutton {padding:4px;background-color:#EFEFEF;} 
    .userbox img{padding:8px;background-color:#EFEFEF;} 
    .userbox img:hover{opacity:.2;} 
    <div class="userbox"> 
    <img src='img.png' style='height:120px;width:120px;border:1px solid #e5e5e5;'> 
    </div> 
    <div class="hello"> Hello</div> 

我想获得的股利与class="hello"显示在图像的顶部中央，当有人悬停在徘徊。有什么想法吗？

Answer 1

如果我理解正确的话......当您将鼠标悬停在图像上方时，您希望div出现在图像顶部，对吧？

如果你的意思是如何显示/隐藏它，我可以考虑两种方法来做到这一点。一个用css，另一个用jQuery。

CSS：

<a href="#" class="Anchor"> 
<img src='img.png' class="img"> 
<span class="Hello">hello</span> 
</a> 

a.anchor span.Hello {visibility:hidden;} 
a.anchor:hover span.Hello {visibility:visible;} 

，并使用一些定位（.Anchor是相对的，绝对.Hello，有了正确的z-index）。

的jQuery：

$(document).ready(function() { 
    $('.img').mouseover(function(){ 
    $('span.Hello').show(); 
    }); 
}); 

如果你想知道的中心部，澄清:)

Answer 2

http://jsfiddle.net/eXSzJ/

我不知道，如果你想知道的定心，或：悬停，但继承人如何用CSS做到这一点

Answer 3

你在这里：

http://fiddle.jshell.net/HXRsX/9/

Answer 4

你也可以用css做百分比值。

http://jsfiddle.net/rh6qW/5/

Answer 5

相同的位与鼠标悬停鼠标移开：

http://jsfiddle.net/wbrv5/

<div class="userbox"> 
    <img src='img.png'> 
    <div class="hello" style="display:none"> Hello</div> 
</div> 

$('.userbox img').mouseover(function() { 
    $(".hello").show(); 
}); 

$('.userbox img').mouseout(function() { 
    $(".hello").hide(); 
}); 

.vpbutton {padding:4px;background-color:#EFEFEF;} 

.userbox {position:relative;} .userbox img{height:120px;width:120px;border:1px solid 
#e5e5e5;padding:8px;background-color:#EFEFEF; } .userbox img:hover{opacity:.2;} 

.hello { position:absolute; top:10px; left:10px; } 

Answer 6

，而每个人都回答，我是做我自己的的jsfiddle，也没有JavaScript的 http://jsfiddle.net/jCUNm/

Answer 7

这是我能做的最好的。唯一的限制是只能有一行文字。但是，您可以很容易地将其转换为执行一些不同的操作，例如生成一个内部为div的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

UPDATE正确计算边距/填充/边框。