: 플로팅에서 마우스 오버가 작동하지 않습니다.

약간의 문제로 고심하고 있으며 도움을받을 수 있다고 확신합니다. 오른쪽에 떠있는 닫기 버튼이 있는데, 왜 그런지 모르지만 'onclick'이벤트를 잡지 못했습니다.
그래서 마우스를 넘어갈 때 실제로 어떤 일이 발생하는지 보려면 'hover'규칙을 적용 해 보았습니다. 아무 것도 발생하지 않았습니다 (시안 색 배경은 자주색으로되어 있음).
그리고 주요 div 배경 변경 사항을 볼 수 있습니다.: 플로팅에서 마우스 오버가 작동하지 않습니다.

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/

출처

2017-02-13 Valentin Coudert

포인터 이벤트 : 없음; 버블 클로즈 클래스에서이 줄을 지우십시오. –