0

したがって、不透明度を0に変更することで、ホバーするともう一方がグレースケールに変わる2つのカラー画像があります（各画像の白黒コピーがすぐ後ろにあります）。これは正常に機能します。

ホバーした画像の上にキャプションを表示しようとしています（ホバーしたとき）。画像にカーソルを合わせると、キャプションが正常に表示されます。ただし、マウスをキャプションの上に移動すると、画像自体にカーソルを合わせる必要がなくなるため、キャプションが常に消えて再表示されます。キャプションが消えたら、画像にもう一度カーソルを合わせると、再び表示されます。

私がしたいのは、このキャプションにカーソルを合わせると、まだ画像にカーソルを合わせているかのように動作することです。代わりに、画像の上にキャプションを永続的に表示することも受け入れます（正直に言うと、長期的にはさらに良いかもしれません）。

event.stopPropagation（）メソッドを調べましたが、これにより、効果がDOMまたはその効果への何かを上に移動するのを防ぐようであり、このキャプションは兄弟です。

コードは次のとおりです

HTML

<div id="leftbox">
  <div id="upper" class="cap">
    <div class="gallery">
      <ul>
        <li>
          <a href="link.html">
            <img src="images/img1_color.jpg" class="color" alt="a" id="img1>
          </a>
        </li>
        <li>
          <a href="link.html">
            <img src="images/img1_dark.jpg" class="dark" alt="a">
          </a>
        </li>
      </ul>
    </div>
    <div id="caption1">
    </div>
  </div>
  <div id="lower" class="cap">
    <div class="gallery">
      <ul>
        <li>
          <a href="link2.html">
            <img src="images/img2_color.jpg" class="color" alt="b" id="img2>
          </a>
        </li>
        <li>
          <a href="link2.html">
            <img src="images/img2_dark.jpg" class="dark" alt="b">
          </a>
        </li>
      </ul>
    </div>
    <div id="caption2">
    </div>
  </div>
</div>

CSS

.gallery li {
  list-style-type: none;
  position: relative;
}

img.dark {
  position: absolute;
  left: 0;
  top: 0;
}

img.color {
  position: absolute;
  left: 0; 
  top: 0;
  z-index: 1;
}

#leftbox {
  float: left;
  width: 450px;
  margin: 5px 10px 0px 0px;
}

#leftbox #upper {
  width: 450px;
  height: 250px;
  margin: 0px 0px 10px 0px;
}

#leftbox #lower {
  width: 450px;
  height: 250px;
  margin: 0px 0px 5px 0px;
}

.gallery  #capimg1{
  height: 20px;
  text-align: center;
  color: #ffffff;
  background-color: green;
  z-index:2;
  display: none;
  position: absolute;
  padding: 5px 100px 5px 100px;
}

.gallery  #capimg2{
  height: 20px;
  text-align: center;
  color: #ffffff;
  background-color: green;
  z-index:2;
  display: none;
  position: absolute;
  padding: 5px 100px 5px 100px;
}

Javascript

window["img1"] = "#img1";
window["img2"] = "#img2";

$(document).ready(function(){
  $('img.color').hover(function(ev) {
    if (this.id == "img1") {
      $(img2).stop().animate({"opacity": "0"}, 600);
    }
    else if (this.id == "img2") {
      $(img1).stop().animate({"opacity": "0"}, 600);
    }

    $('#cap'+this.id).stop().fadeIn(400).html(this.alt);
  },
  function reAnim() {
    $([img1, img2].join(",")).stop().animate({"opacity": "1"}, "slow");
    $('#cap'+this.id).css("display", "none");       }
  );
});

副次的な質問：＃capimg1と＃capimg2のdivをギャラリーのdivと同じ幅にする方法はありますか？そうでない場合は、画像ごとにdivを作成し、幅をハードコードします。

手伝ってくれてありがとう

4

1 に答える 1

1

JavaScriptを次のように変更します。

$(document).ready(function(){
  $('img.color').parents('div.cap').hover(function(ev) {
    if ($(this).find('img.color')[0].id == "img1") {
      $(img2).stop().animate({"opacity": "0"}, 600);
    }
    else if (this.id == "img2") {
      $(img1).stop().animate({"opacity": "0"}, 600);
    }

    $('#caption_'+$(this).find('img.color')[0].id).stop().fadeIn(400).html($(this).find('img.color')[0].alt);
  },
  function reAnim() {
    $([img1, img2].join(",")).stop().animate({"opacity": "1"}, "slow");
    $('#caption_'+$(this).find('img.color')[0].id).css("display", "none");
  });
});

次に、HTMLを次のように変更します。

<div id="upper" class="cap">
  <div class="gallery">
    <ul>
      <li>
        <a href="link.html">
          <img src="images/img1_color.jpg" class="color" alt="a" id="img1>
        </a>
      </li>
      <li>
        <a href="link.html">
          <img src="images/img1_dark.jpg" class="dark" alt="a">
        </a>
      </li>
    </ul>
  </div>
  <div id="caption_img1">
  </div>
</div>

上記の編集の重要な部分は、キャプションのIDを、imgのIDと簡単に関連付けることができるものに変更することです。

これは、画像自体ではなく、コンテナにホバー効果を配置します。したがって、リストアイテムにカーソルを合わせると、どの子が表示されているかどうかに関係なく、効果が維持されます。

編集

ほとんどあなたの側の質問を逃しました。それらをギャラリーdivと同じサイズにしたい場合は、次の2つの方法のいずれかにアプローチする必要があります。

  1. ギャラリーの下のすべての要素を100％の幅に設定します

    .gallery ul, .gallery li, .gallery a, .gallery img {
  width: 100%;
}

  2. 次のように、jQueryを使用して幅変数を設定します。

    $('.gallery img').width($('.gallery').width());

編集2

これが修正された最初の問題の実例です

于 2013-03-08T20:34:10.243 に答える