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

我正在组建一个反应迅速的画廊。具有以下功能：

• 开始状态：图像右下角有一个简短的标题
• 鼠标悬停在图像上：将显示一个颜色覆盖，并在图像的左上角显示更长的标题

问题：

当您将鼠标悬停在图像上时，一切正常，直到您的鼠标悬停在较长的标题文本上，这会破坏颜色覆盖效果（仅当鼠标悬停在文本上时才会发生这种情况）

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>

jQuery

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

---

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

您只需向包含文本的div的CSS规则中添加

指针事件：none

这是一个

我应该指出，

指针事件

不受旧版本Internet Explorer的支持，但提到了一个显然可以绕过这个问题的黑客

作为替代方案，下面是一个示例，说明如何在不使用

指针事件

规则（甚至是JQuery）的情况下执行相同的操作：

.bg{
宽度：500px；
高度：150像素；
背景色：#666；
位置：相对位置；
}
.悬停{
显示：块；
位置：绝对位置；
不透明度：0；
宽度：100%；
身高：100%；
背景色：rgba（0,50100,0.75）；
过渡：不透明度0.3s；
}
.悬停文本{
颜色：#fff；
填料：1米2米；
}
.注{
颜色：#aaa；
字号：3em；
填充：0.2em 0.4em；
}
.bg:悬停，悬停{
不透明度：1；
}

这种悬停效果可以使用基本CSS实现。
您不需要使用JQuery或
指针事件
规则

将鼠标移动到此矩形上

非常感谢，就这样@戈蒂：没问题。我对答案进行了一些更新，以展示如何在没有JQuery或指针事件规则的情况下实现相同的效果。

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