Question

我创建了一个弹出框，显示何时悬停在图像上。这是我的代码：

HTML：

<div class="infoimg" style="float: left;"><img src="http://i.imgur.com/W1FxGnH.png" alt="Lorem ipsum" width="62" height="61">
<div class="infobox"><span>Lorem ipsum</span>
    <ul style="padding-top: 15px;padding-left:5px; margin-left: 5px;list-style-type: disc;">
      <li>Lorem ipsum dolor sit amet.</li>
      <li>Consectetur adipiscing elit.</li>
      <li>Sed maximus magna vel facilisis vulputate.</li>
      <li>Mauris sit amet elit sit amet ipsum.</li>
    </ul>
  </div>
</div>

CSS：

.infobox {
  opacity: 0;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
}

.infoimg:hover div.infobox {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
}

然而，由于我对“infobox”div使用“opacity：0”而不是使用“display：none”（以创建淡入/淡出效果），因此信息框在技术上仍然存在。这就是我的问题所在，当鼠标悬停在不可见的“信息框”区域时，会发生悬停效果。我想要的是只有当鼠标指针在“infoimg”div上时才启动悬停效果。我尝试应用以下代码来尝试限制区域，但它不起作用：

.infoimg {
  width: 62px;
  height: 61px;
}

这是一个JSFiddle链接，用于现场演示我的问题：https://jsfiddle.net/x9h5rqdw/

如您所见，当鼠标位于“infoimg”旁边的空白区域（信息框）上方时，将启动悬停效果。

Answer 1

这非常简单。您需要添加visibility: hidden;和visibility: visible;

CSS：

.infobox {
  opacity: 0;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
  /* here */
  visibility: hidden;
}

.infoimg:hover div.infobox {
  opacity: 1;
  position: absolute;
  top: 0;
  left: 72px;
  right: 0;
  width: 200px;
  height: 110px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #000;
  color: black;
  font-family: Verdana;
  font-size: 9px;
  padding: 10px 10px;
  line-height: 12px;
  /* here */
  visibility: visible;
}

.infoimg {
  width: 62px;
  height: 61px;
  -webkit-transition: 0.4s ease-in-out;
  -moz-transition: 0.4s ease-in-out;
  -ms-transition: 0.4s ease-in-out;
  -o-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}

pointer-events: none;是最简单的方法，但它不是跨浏览器： http://caniuse.com/#feat=pointer-events

工作示例：https://jsfiddle.net/x9h5rqdw/4/

Answer 2

您可以在pointer-events: none上设置.infobox来修复该行为。

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）可以成为鼠标事件的目标。如果未指定此属性，则visiblePainted值的相同特征将应用于SVG内容。

来源：https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

限制“div”的“：hover”区域

2 个答案: