html - :hover not working on float

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;
}

fiddle https://jsfiddle.net/d34xsvnq/

Answer 1

你把 pointer-events: none; - 只是从你的 CSS 类中删除它。