jquery - 悬停 -> 标题文本 -> 干扰悬停效果

Question

我正在组建一个响应式画廊。具有以下功能:

• 开始状态:图像的右下角有一个简短的说明。
• 鼠标悬停在图片上:显示颜色叠加层，并在图片左上角显示更长的标题

问题:

当您将鼠标悬停在图像上时，一切正常，直到您的鼠标悬停在较长的标题文本上，这会破坏颜色叠加效果(这只会在鼠标悬停在文本上时发生)。

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

即使鼠标悬停在图像左上角显示的较长标题文本上，我也希望悬停效果保持有效。

Answer 1

您只需要在包含文本的 div 的 CSS 规则中添加 pointer-events:none

这是一个 updated jsfiddle

我应该指出，旧版本的 Internet Explorer 不支持 pointer-events，但是 this answer提到了一个显然可以解决问题的 hack。

作为替代方案，这里有一个示例，说明如何在没有 pointer-events 规则(甚至是 JQuery 的情况下)的情况下做同样的事情:

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