Question

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

    <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属性缺少结束分号。

将弹出窗口转换为相对Isn工作

1 个答案: