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 divs与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相同的尺寸，你需要采用以下两种方式之一：

将图库下方的所有元素设置为宽度为100％

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

使用jQuery设置width变量，如下所示：

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

编辑2

Here's a working example of your first problem fixed

徘徊在兄弟姐妹停止悬停效果

1 个答案: