我需要顯示在圖像的頂部一個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正確計算邊距/填充/邊框。