:hover not working on float

Question

I'm struggling with a little problem and I'm sure you can help. I have a close button, floating on the right, and I don't know why but it didn't catch 'onclick' events.
So I've tried applying a CSS 'hover' rule to see if something actually happens when the mouse passes over: nothing happened (the cyan background is supposed to become purple).
And you can see the main div background changes.

Is there a problem with the z-index ? Is there something else ?

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

you put pointer-events: none; - just delete it from your CSS class.