如何针对其父元素定位工具提示？

Question

我正在尝试制作小型图库。在：悬停时，应在每张图像的左侧显示工具提示。我的HTML代码如下所示：

.gallery {
  right: 247px;
  width: 220px;
}

.gallery li {
  display: inline;
  width: 100px;
  height: 100px;
  position: relative;
}

.gallery img {
  float: right;
  margin: 10px;
  box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  /* for Safari */
  background-clip: padding-box;
  /* for IE9+, Firefox 4+, Opera, Chrome */
}

.tooltip {
  width: 300px;
  height: 100px;
  display: none;
  position: absolute;
  right: -108px;
  top: 222px;
  z-index: 70;
  background-color: rgba(0, 0, 0, 0.4);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
}

.gallery li:hover>.tooltip {
  display: inline;
  z-index: 70;
}

.gallery li:hover {
  background: #fff;
}

.gallery li:hover img {
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 1);
}

<ul class="gallery">
  <li>
    <a href="#" class="thumb"><img src="img/pillow.jpg" alt=""></a>
    <div class="tooltip"></div>
  </li>
  <li>
    <a href="#" class="thumb"><img src="" alt=""></a>
    <div class="tooltip"></div>
  </li>
  <li>
    <a href="#" class="thumb"><img src="" alt=""></a>
    <div class="tooltip"></div>
  </li>
  <li>
    <a href="#" class="thumb "><img src="" alt=""></a>
    <div class="tooltip"></div>
  </li>
  <li>
    <a href="#" class="thumb"><img src="" alt=""></a>
    <div class="tooltip"></div>
  </li>
</ul>

如上所述，这个想法是.tooltip有位置：绝对，它应该出现在悬停的<li>的左边，但不知何故它每次出现在同一个地方。它可能是什么原因？

Answer 1

试试 -

   <style>
 .tooltip {
    display: inline;
    position: relative;
  }

  .tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.4);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(tooltip);
    right: -180px;
    top:222px;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 300px;
    height:100px;

}

然后

    <img src="#" tooltip="This is a tooltip" alter="alternative text" />

Answer 2

你需要将li设置为position:relative，而不是a或img，因为li是实际的祖先;另外两个是兄弟姐妹。

Answer 3

.gallery li {
    display: inline;
    width: 100px;
    height: 100px;
    position: relative;
}

这种风格不正确，内联元素没有height，实际上width，尝试display: inline-block

另外，你为display: inline元素设置position: absolute，更正确的也是display: block|inline-block

.gallery img {
    float: right;
    margin: 10px;
    box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

上面的代码也似乎很奇怪，为什么你需要float: right的图像，可能你想要这个样式的li元素，但不要使用display: inline or inline-block