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

私の理解が正しければ...ホバーしたときに画像の上にdivが表示されるようにしますよね？

どうやって表示/非表示にするかというと、2つの方法が考えられます。1 つは css を使用し、もう 1 つは 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 インデックスを使用します)。

jQuery:

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

センタリング部分について疑問がある場合は、明確にしてください:)

于 2012-08-02T20:49:53.473 に答える
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

これは私ができる最善のことです。唯一の制限は、テキストが 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

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 に答える