0

所以我有两个彩色图像，当悬停时，通过将不透明度更改为 0，将另一个变为灰度（每个图像的黑白副本直接位于后面）。这很好用。

我现在正试图在悬停的图像上显示一个标题（当它悬停时）。发生的情况是，当我将鼠标悬停在图像上时，标题显示得很好。但是，如果鼠标移到标题上，则标题会不断消失并重新出现，因为我不再将鼠标悬停在图像本身上。当标题消失时，我再次将鼠标悬停在图像上，因此它重新出现。

我想要发生的是，当我将鼠标悬停在此标题上时，它的行为就像我仍在悬停图像一样。我也接受在图像上永久显示标题作为替代方案（老实说，从长远来看可能会更好）。

我已经研究了 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 相同，您需要使用以下两种方法之一：

  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 回答