限制"div"的":悬停"区域

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

但是,由于我使用"opacity:0"作为"infobox"div而不是使用"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/