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

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相同？如果没有我就为每个图像的股利和硬编码在宽度

感谢您的帮助

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相关联

这样做是将悬停效果不放在图像本身，而是容器。因此，无论何时显示或不显示子项目，只要您的列表项目被悬停，效果就会保持不变。

编辑

几乎错过你身边的问题。如果你想使这些大小相同的库格，你将需要接近的两种方式这一个：

1. 设置如下库中的所有元素具有100％的宽度

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

2. 设置使用jQuery的宽度可变，就像这样：

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

EDIT 2

Here's a working example of your first problem fixed