1 
    .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"当有人将鼠标悬停在图像上方时，我试图让 div显示在图像的顶部。请问有什么想法吗？

4

7 回答 7

2

当每个人都在回答时，我正在制作自己的 jsfiddle，也没有 javascript http://jsfiddle.net/jCUNm/

于 2012-08-02T21:00:22.460 回答
1

http://jsfiddle.net/eXSzJ/

我不知道您是否想知道居中或：悬停，但这是如何使用 css

于 2012-08-02T20:52:32.660 回答
1

干得好：

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

于 2012-08-02T20:53:15.583 回答
1

您也可以使用带有百分比值的 css 来实现。

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

于 2012-08-02T20:54:18.077 回答
1

与 mouseover mouseout 有点相同：

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; }
于 2012-08-02T20:55:35.887 回答
1

这是我能做的最好的。唯一的限制是只能有一行文本。但是，您可以很容易地将其转换为做一些不同的事情，例如在内部生成一个占图像宽度 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

更新以正确考虑边距/填充/边框。

于 2012-08-02T21:10:03.247 回答
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();
   });
});

如果您想知道居中部分，请澄清:)

于 2012-08-02T20:49:53.473 回答