：懸停不能在浮標上工作

Question

我正在努力解決一些小問題，我相信您可以提供幫助。 我有一個關閉按鈕，右側浮動，我不知道爲什麼，但沒有捕捉到'onclick'事件。
所以我試過應用CSS'懸停'規則來查看鼠標經過時是否真的發生了什麼：什麼都沒有發生（青色背景應該變成紫色）。
你可以看到主要的div背景變化。

z-index有問題嗎？還有別的嗎？

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類刪除它。