Question

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

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

问题：

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

HTML

    <div class="nav-wrapper container valign-wrapper"><a id="logo-container" href="#" class="brand-logo">Beer Portfolio</a>

CSS

  <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

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

Working Example

即使鼠标悬停在图片左上角显示的较长字幕文本上，我希望悬停效果仍然有效。

Answer 1

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

的div的CSS规则中

这是updated jsfiddle

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

作为替代方案，这里有一个例子，说明如何在没有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>

悬停 - ＆gt;标题文字 - ＆gt;干扰悬停效应

1 个答案: