html - float 元素不接收鼠标事件

Question

两个子元素在一个固定宽度的 div 中。

第一个元素是一个可能很长的文本句子，所以使用了overflow: hidden规则。

第二个是 float 元素，它必须始终可见并且位于父元素的右侧。此元素必须对悬停和单击等鼠标事件使用react。

以下代码段演示了该问题。

测试鼠标悬停和点击:

• 悬停时元素颜色变化(句子为绿色， float 为红色)
• 在控制台上可以看到每个元素的点击次数

当句子足够短以至于句子和 float 元素之间仍有一些空间时，一切正常。

但是当句子很长时， float 元素不再接收事件，而是句子接收。

有没有办法在保留此布局的同时确保鼠标事件由 float 元素接收？

.parent {
  width: 200px;
  white-space: nowrap;
  border: black 1px solid;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.sentence {
  /* pointer-events: none; */
}

.sentence:hover {
  color: green
}

.float {
  float: right;
  z-index: 10;
}

.float:hover {
  color: red
}

<div class="parent" onclick="console.log('parent')">
  <div class="float" onclick="console.log('float')">FLOAT</div>
  <span class="sentence" onclick="console.log('sentence')">very loooooooooooooong sentence</span>
</div>

<div class="parent" onclick="console.log('parent')">
  <div class="float" onclick="console.log('float')">FLOAT</div>
  <span class="sentence" onclick="console.log('sentence')">short sentence</span>
</div>

Answer 1

使用 z-index 是正确的，但 z-index 属性仅适用于具有非静态位置的元素。因此，将 position: relative 添加到您的 float 规则中:

.float {
  float: right;
  z-index: 10;
  position:relative;
}

.parent {
  width: 200px;
  white-space: nowrap;
  border: black 1px solid;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

.sentence {
  /* pointer-events: none; */
}

.sentence:hover {
  color: green
}

.float {
  float: right;
  z-index: 10;
  position:relative;
}

.float:hover {
  color: red
}

<div class="parent" onclick="console.log('parent')">
  <div class="float" onclick="console.log('float')">FLOAT</div>
  <span class="sentence" onclick="console.log('sentence')">very loooooooooooooong sentence</span>
</div>

<div class="parent" onclick="console.log('parent')">
  <div class="float" onclick="console.log('float')">FLOAT</div>
  <span class="sentence" onclick="console.log('sentence')">short sentence</span>
</div>