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

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