Hover -> Caption Text -> Interferes with hover effect

Question

I am in the process of putting together a responsive gallery. with the following functionality:

• Begin state: Image has a short caption on the lower right corner.
• Mouse hovers over the image: a color overlay is displayed and a much longer caption is displayed on the upper left corner of the image

Problem:

When you hover over the image, it all works fine until your mouse hovers over the longer caption text which breaks the color overlay effect (this only happens while the mouse hovers over the text).

HTML

  <div class="container">

<div class="row ">
  <ul>

        <li class="col-md-8 image">
          <div class="hoverbox1">
            <img class="img-responsive" src="http://i.imgur.com/6OHsbi1.jpg" width="940px" height="627px" />
          </div>
          <div class="desc1">
            <h2 class="h2Alone1">Description here</h2>
          </div>
          <div class="desc1b" style="display:none;">
            <p class="article1">Description here<br />Some caption text here explaining what this photo is about. How nice this and so on. Some caption text here explaining what this photo is about. How nice this and so on.</p>
          </div>
        </li>
    </ul>
  </div>

CSS

    h2 {
    font-size: 17px !important;
  }

ul {
    list-style-type: none;
  }

img {
    padding-bottom: 20px;
  }

.desc1 {
    background-color: #000;
    /*bottom: 0;*/
    color: #fff;
    right: 0;
    margin-right:15px;
    opacity: 0.5;
    position: absolute;
    width: 80%;
    padding: 0px;
    margin-top:-72px;
    z-index: 100;
  }

  .desc1b {
      color: #fff;
      right: 0;
      left:0px;
      opacity: 0.5;
      position: absolute;
      width: 80%;
      padding-top: 10px;
      padding-left: 30px;
      top:0px;
      z-index: 100;
    }

.desc1 h2 {
    padding-left: 10px;
  }

.image {
    width:100%;
    padding:0px;
  }

.hoverbox1 {
    position:relative;
    /*display:inline-block;*/
  }

.hoverbox1:hover:after {
    content:"\A";
    width:99.9%;
    height:96%;
    background:rgba(65, 105, 225, 0.5);
    position:absolute;
    top:0;
    left:0;
  }

jQuery

    $('.hoverbox1').on('mouseenter', function() {
  $(".desc1b" ).show();
  $(".desc1" ).hide();
}).on('mouseleave', function(){
  $(".desc1" ).show();
  $(".desc1b" ).hide();
});

Working Example

I would like the hover effect to remain in effect even if the mouse hovers over the longer caption text that is displayed on the upper left corner of the image.

Answer 1

You just need to add pointer-events:none to the CSS rules for the div containing the text

Here's an updated jsfiddle

I should point out that pointer-events isn't supported by older versions of Internet Explorer, but this answer mentions a hack that apparently gets around the problem.

As an alternative, here's an example of how you can do the same thing without pointer-events rules (or even JQuery for that matter):

.bg {
  width:500px;
  height:150px;
  background-color:#666;
  position:relative;
}
.hover {
  display:block;
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  background-color:rgba(0,50,100,0.75);
  transition:opacity 0.3s;
}
.hover-text {
  color:#fff;
  padding:1em 2em;
}
.note {
  color:#aaa;
  font-size:3em;
  padding:0.2em 0.4em;
}
.bg:hover .hover {
  opacity:1;
}

<div class="bg">
  <div class="hover">
    <p class="hover-text">This hover effect can be achieved using basic CSS.
      You don't need to use JQuery or <code>pointer-events</code> rules.</p>
  </div>
  <p class="note">Move the mouse over this rectangle.</p>
</div>