悬停在兄弟姐妹上停止悬停效果

Question

所以我有两个彩色图像，当悬停时，通过将不透明度更改为 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 的宽度与gallery div 的宽度相同？如果不是，我将为每个图像创建一个 div 并硬编码其中的宽度。

感谢帮助

Answer 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

Here's a working example of your first problem fixed