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

Answer 1

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

Answer 2

如果我理解正确...当你将鼠标悬停在图像顶部时，你想要一个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 3

http://jsfiddle.net/eXSzJ/

我不知道你是否想知道中心，或者：悬停，但是继承人如何用css做这件事

Answer 4

你走了：

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

Answer 5

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

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

Answer 6

鼠标悬停鼠标输出有点相同：

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 7

这是我能做的最好的事情。唯一的限制是只能有一行文字。但是，您可以相当容易地将其转换为执行一些不同的操作，例如在图像宽度的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

更新以正确计算边距/填充/边框。

我需要在图像上显示一个div：悬停在悬停上

7 个答案: