: зависание не работает на поплавке

Question

Я боюсь с небольшой проблемой, и я уверен, что вы можете помочь. У меня есть кнопка закрытия, плавающая справа, и я не знаю почему, но она не ловила события onclick.
Итак, я попытался применить правило «зависания» CSS, чтобы увидеть, действительно ли что-то происходит, когда мышь проходит: ничего не произошло (голубой фон должен быть фиолетовым).
И вы можете увидеть основные изменения фона 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; 
} 

Fiddle https://jsfiddle.net/d34xsvnq/

Answer 1

вы положили pointer-events: none; - просто удалите его из вашего класса CSS.