親がホバーにいるときに入力要素を有効にする

Question

レイアウトは単純ですが、ピンにポップアップを作成します。あなたが.pin要素を置くと、ポップアップがフェードアニメーションで表示されるはずです

<div class="pin"> 
    <div class="popup"> 
    <div class="arrow1"></div> 
    <div class="arrow2"></div> 
    <div class="content"> 
     text... 
    </div> 
    </div> 
</div> 

：私はこの単純なHTMLを行っています。だから、.popup要素はCSSを持っています

z-index: -1; 
opacity: 0; 
transition: all 0.25s ease 0s; 

そして、あなたは.pinを置くと、このCSSは（私はSASS/SCSS構文を使用します）が適用されます：

&:hover, &.active { 
    .popup { 
    z-index: 9; 
    opacity: 1; 
    } 
} 

全作業例を：jsFiddle

私はz-index -sを使用しています。私の問題のために：.popup要素があるはずの場所を入力してもポップアップが表示されます。それはちょうどopacity: 0;を持っているので論理的ですが、どうすれば修正できますか？ .popupは、.pinをホバーした後にのみ開く必要があります。その後、.popup要素にマウスを移動すると、テキストを選択できます。私はdisplay: none/block;でそれを行うことができますが、私はアニメーションを持たないことを知っています。私たちを手伝ってくれますか？

Answer 1

使用visibility

jsFiddle demo

最初

：

visibility: hidden;  /* add this */ 
opacity: 0; 
transition: 0.3s; 

ピンが推移している：

visibility: visible;  /* and this */ 
opacity: 1; 

Answer 2

あなたは私の一日保存pointer-events

Updated fiddle

.popup { 
    position: absolute; 
    top: 4px; 
    left: -218px; 
    width: 230px; 
    font-size: 13px; 
    z-index: -1; 
    opacity: 0; 
    transition: all 0.25s ease 0s; 
    pointer-events: none;   /* added property */ 

&:hover, &.active { 
    .popup { 
     z-index: 9; 
     opacity: 1; 
     pointer-events: auto;   /* added property */ 
    } 
    }