Question

我正在努力解决一个小问题，我相信你可以提供帮助。我有一个关闭按钮，漂浮在右边，我不知道为什么，但它没有抓住＆＃39; onclick＆＃39;事件。
所以我尝试过使用CSS＆＃39; hover＆＃39;当鼠标经过时，看看是否有实际发生的事情：没有发生任何事情（青色背景应该变成紫色）你可以看到主要的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类中删除它。

：悬停不工作浮动

1 个答案: