ポップアップを相対的に変換すると動作しない

Question

私は古いコードを使ってメッセージをポーズしています。これは、絶対配置でコード化され、正常に動作します。しかし、コードを相対的な位置に変更する必要があるので、コードはモバイルデバイスでうまく機能します。この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で行ったように親をターゲットにしていません。以下では、親がホバー上で子供を参照することができます。終了セミコロンが欠落している999個の特性：また、次の3つのzインデックスを持つ

.showme:hover .spankme 

.showhim:hover .spankme 

に

変更。