将鼠标悬停在同级上可停止悬停效果

Question

So I have two colour images that when hovered will turn the other to greyscale (there is a black and white copy of each image sitting directly behind) by changing the opacity to 0. This works fine.

I'm now trying to display a caption over the hovered image (when its hovered). What happens is that when I hover over the image, the caption appears just fine. If the mouse moves over the caption though, the caption just constantly disappears and reappears as I'm no longer hovering over the image itself. When the caption disappears I'm hovering on the image again so it reappears.

What I'd like to happen is that when I hover over this caption it behaves as though I'm still hovering the image. I would also accept displaying the caption over the image permanently as an alternative (might even be better in the long run to be honest).

I've looked into the event.stopPropagation() method but that seems to prevent effects moving up the DOM or something to that effect and this caption is a sibling.

Code is as follows

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");       }
  );
});

Side question: Is there a way to make the #capimg1 and #capimg2 divs the same width as the gallery div? If not I'll just create a div for each image and hardcode the width in.

Thanks for help

Answer 1

Change your javascript as such:

$(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");
  });
});

And then change your HTML to this:

<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>

The important part of the above edit is changing the ID of the caption to something that we can easily associate with the img's ID

What this does is place the hover effect not on the image itself, but the container. Therefore, whenever your list item is hovered over, then the effect will be maintained, regardless what child is displayed or not displayed.

EDIT

Almost missed your side question. If you want to make those the same size as your gallery div, you'll need to approach this one of two ways:

1. Set all elements below gallery to have a width of 100%

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

2. Set the width variable using your jQuery, like so:

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

EDIT 2

Here's a working example of your first problem fixed