：浮き上がっていないホバリング

Question

少しの問題で苦労しています。私はあなたが助けることができると確信しています。 私は右に浮かんでいるクローズボタンを持っていますが、なぜそれが「onclick」イベントをキャッチしなかったのか分かりません。
私は、マウスを通り過ぎて何かが実際に起こるかどうかを確認するためにCSSのホバールールを適用しようとしました。何も起こらなかった（シアンの背景が紫色になるはずです）。
メインの背景の変更が表示されます。

Z-インデックスに問題はありますか？他に何かありますか？

HTML

<div id="infobubble-content"> 
    <div id="infobubble-close"> 
     <svg viewBox="0 0 24 24" height="100%" width="100%" preserveAspectRatio="xMidYMid meet" fit=""> 
     <g><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g> 
     </svg> 
    </div> 
    <div id="infobubble-details"> 
     <div id="infobubble-titles"> 
     <h1>AGENCE</h1> 
     </div> 
    </div> 
    </div> 

CSS

#infobubble-content { 
    border: solid 1px #3c87b5; 
    border-radius: 10px; 
    padding: 10px 10px 10px 20px; 
    width: 300px; 
    font-size: 15px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    text-decoration: none; 
} 

#infobubble-details { 
    width: 100%; 
    height: 100%; 
    background-color: white; 
} 

#infobubble-close:hover { 
    background-color: purple; 
} 

#infobubble-details:hover { 
    background-color: yellow; 
} 

#infobubble-close { 
    pointer-events: none; 
    display: block; 
    cursor: pointer; 
    position: relative; 
    float: right; 
    width: 18px; 
    height: 18px; 
    background-color: cyan; 
} 

#infobubble-close svg { 
    fill: grey; 
} 

#infobubble-titles { 
    margin: 0 0 20px 0; 
} 

#infobubble-titles * { 
    margin: 0; 
    font-size: large; 
    font-weight: bold; 
} 

フィドル https://jsfiddle.net/d34xsvnq/

Answer 1

あなたがpointer-events: none;を置く - ちょうどあなたのCSSクラスからそれを削除します。