將Popup轉換爲Relative不起作用

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倍的性能。