css - 将弹出窗口转换为相对窗口不起作用

Question

我有一段旧代码可以在 moseover 上弹出一条消息。它使用绝对定位编码并且工作正常。但我需要将其更改为相对定位，以便代码在移动设备上更好地工作。在这个jsfiddle最上面一行使用的是 relative 并且不起作用。底线是使用绝对并且正在工作。有人可以指出我哪里出错了吗？这是我的代码:

    <style>
    .tooltips {
      position: relative;
      display: inline;
    }
    .spank{
      position: absolute;
      width:250px;
      color: #000;
      background: #FFFFFF;
      border: 1px solid #ccc;
      padding:10px;
      text-align: center;
      display:none;
      border-radius: 7px;
      box-shadow: -1px 0px 7px #ccc;
    }
    .spank:before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -12px;
      width: 0; height: 0;
      border-top: 10px solid #ccc;
      border-right: 10px solid transparent;
      border-left: 12px solid transparent;
    }
    .spank:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -8px;
      width: 0; height: 0;
      border-top: 8px solid #FFFFFF;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
    }
    .showhim:hover .spank{
      display : block;
      left:5px;
      top:1px;
      margin-left: 50px;
      z-index: 999
    }
    .showhim {
      left: 50px;
      position: relative;
      top: 80px;
      width: 100px;
    }

    .spankme{
      position: absolute;
      width:250px;
      color: #000;
      background: #FFFFFF;
      border: 1px solid #ccc;
      padding:10px;
      text-align: center;
      display:none;
      border-radius: 7px;
      box-shadow: -1px 0px 7px #ccc;
    }
    .spankme:before {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -12px;
      width: 0; height: 0;
      border-top: 10px solid #ccc;
      border-right: 10px solid transparent;
      border-left: 12px solid transparent;
    }
    .spankme:after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -8px;
      width: 0; height: 0;
      border-top: 8px solid #FFFFFF;
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
    }
    .showme:hover .spankme{
      display : block;
      left: 10px;
      top:10px;
      margin-left:50px;
      z-index: 999
    }
    .showme { 
      position: relative;
      width: 100px;
    } 
    </style>

    <div class="showme">
     <div class="showme tooltips">Mouse me</div>
     <span class="spankme">Text on popupPlace</span>
    </div>   

    <div class="showhim">
     <div class="showit tooltips">Mouse me</div>
     <span class="spank">Text on popupPlace</span>
    </div>

Answer 1

对于适用于 .spankme 的悬停，您不像使用 .spank 那样定位父对象。以下内容将允许父级在悬停时引用子级。

改变

.showme:hover .spankme

到

.showhim:hover .spankme

另外，您有三个 z-index: 999 属性缺少结束分号。