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

时间:2013-03-08 20:22:37

标签: javascript jquery css hover siblings

所以我有两个彩色图像,当悬停时会将另一个变为灰度(通过将不透明度更改为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并硬编码宽度。

感谢您的帮助

1 个答案:

答案 0 :(得分: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设置width变量,如下所示:

    $('.gallery img').width($('.gallery').width());
    
  3. 编辑2

    Here's a working example of your first problem fixed