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

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

您只需将 pointer-events:none 添加到包含文本

的 div 的 CSS 规则中

这是一个updated jsfiddle

我应该指出 pointer-events 不受旧版本的 Internet Explorer 支持，但 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>

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

Hover -> Caption Text -> Interferes with hover effect

css

jquery

overlay

hover

twitter-bootstrap