2

画像にカーソルを合わせると 2 つの画像を表示するオーバーレイ DIV を含む画像がありますが、これは正常に機能しますが、ページ上の無数の画像に対して動的に機能するようにしたいのですが、現在は最初の画像に対してのみ機能します。 m は javascript と jquery が苦手なので、これについて助けていただければ幸いです。

Jquery コード:

$("#imageOverlay").hover(
    function() {
        $(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
    },
    function() {
        $(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});

HTML コード:

<div id="imageOverlay">
  <div id="hover">
    <a href="#"><img src="http://placehold.it/100x30&text=Full View" /></a>
    <a href="#1"><img src="http://placehold.it/100x30&text=Similar" /></a>
  </div>
  <img src="http://placehold.it/1000x1000&text=Thumbnail">
</div>

CSS コード:

#imageOverlay {
    display: inline;
    position: relative;
}
#imageOverlay #hover {
    display: none;
    position: absolute;
    margin-top: 10px;
    margin-right: 10px;
    z-index: 2;
}
#imageOverlay #hover a {
    width: 100px;
    height: 30px;
    display: block;
    margin-bottom: 5px;
}
4

2 に答える 2

3

とのクラスを使用する#imageOverlayと#hover、IDのインスタンスは1つしか持てないため、これらのIDが複数ある場合、関数は最初のIDのみを検索します。また、個々の画像ではなく、コンテナボックスをフェードするだけです。また、stop()アニメーションの前に使用して、人々が要素のオンとオフを切り替えているときに奇妙な動作をしないようにします。次に、メイン画像を最初に配置することで、ホバーされた画像が心配することなく「上」に配置されz-indexます。

HTML

<div class="imageOverlay">
  <img src="http://placehold.it/1000x1000&text=Thumbnail">
  <div class="hover">
    <a href="#"><img src="http://placehold.it/100x30&text=Full View" /></a>
    <a href="#1"><img src="http://placehold.it/100x30&text=Similar" /></a>
  </div>
</div>

JS

//fade out the images initially
$(".imageOverlay .hover").fadeTo(0, 0)
$(".imageOverlay").hover(
    function() {
        $(this).find(".hover").stop().fadeTo(200, 1);
    },
    function() {
        $(this).find(".hover").stop().fadeTo(200, 0);
    } //when writing clean code, be sure your closer ends at the same indent as your opener
);

CSS

.imageOverlay {
    display: inline-block;
    position: relative;
}
.imageOverlay .hover {
    position: absolute;
    top: 10px;
    right: 10px;
}
.imageOverlay .hover a {
    width: 100px;
    height: 30px;
    display: block;
    margin-bottom: 5px;
}

また、ホバーすると画像が一番上に表示されます。

于 2012-12-07T19:44:43.017 に答える
2

クラスを作成し、 html#imageOverlayの複数の属性に適用します。

CSS:

.imageOverlay
    //css rules

jquery:

$(".imageOverlay").hover(
  function() {
      $(this).children("img").fadeTo(200, 0.7).end().children("#hover").show();
  },
  function() {
      $(this).children("img").fadeTo(200, 1).end().children("#hover").hide();
});

html:

<div class="imageOverlay">
   // do stuff
</div>
<div class="imageOverlay">
   // do stuff
</div>
于 2012-12-07T19:39:06.500 に答える