入力のフォーカスに表示されたdivにリンクを追加します。

Question

入力がフォーカスを取得すると、ツールチップが表示されます。このツールチップはスパンです：隠されていますが、入力にフォーカスがあるときに（CSSを介して）表示されます。

input + .k-comments { 
 
     display: none; 
 
     max-width: 25em; 
 
     color: #FFF; 
 
     background: #283135; 
 
     padding: 0.3rem; 
 
     margin-top: 0.3rem; 
 
     animation: appearance 2s forwards; 
 
    } 
 

 
    input:focus + .k-comments { 
 
     display: block; 
 
    }

<input id="myid" type="text"/> 
 
<span class="k-comments">foo <a href="www.google.com">a link</a></span>

私はツールチップ（または他の場所）をクリックすると、それが消える：OK。
問題：私のツールチップにはテキストとリンクが含まれています - >ツールチップが最初に消えるためリンクをクリックできません。おそらく

Answer 1

ない最善の解決策はなく、少なくともそれは、リンクをクリック可能になり：

input:focus + .k-comments, 
.k-comments:active { 
    display: block; 
} 

Answer 2

 
input + .k-comments { 
    visibility: hidden; 
    opacity: 0; 
    max-width: 25em; 
    color: #FFF; 
    background: #283135; 
    padding: 0.3rem; 
    margin-top: 0.3rem; 
    transition: all 2s linear; 
} 

input:focus + .k-comments { 
    visibility: visible; 
    opacity: 1; 
    transition: none; 
} 

私のソリューション：コメントへの隠されたトランジションを追加。