：悬停不能在浮标上工作

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类删除它。