浮动元素不接收鼠标事件答案

【问题标题】：Floated element do not receive mouse events浮动元素不接收鼠标事件
【发布时间】：2016-07-23 02:04:33
【问题描述】：

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

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

第二个是浮动元素，必须始终可见并位于父元素的右侧。此元素必须对鼠标事件（如悬停和单击）做出反应。

下面的 sn-p 演示了这个问题。

鼠标悬停和点击测试：

悬停时元素颜色发生变化（句子为绿色，浮动为红色）
在控制台上可以看到每个元素的点击次数

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

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

有没有办法确保浮动元素接收鼠标事件，同时保留此布局？

.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>

【问题讨论】：

标签： html css

【解决方案1】：

使用 z-index 是正确的，但 z-index 属性仅适用于具有非静态位置的元素。所以在你的浮动规则中添加position: relative：

.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>

【讨论】：

是的，确实position: relative 似乎足够了，我可以删除z-index。我忘记在我的 sn-p 中删除 z-index 这只是一个测试。

【解决方案2】：

我添加了 display: block;并移动溢出：隐藏；到句子类。这应该可以防止悬停工作异常。溢出仅“隐藏”在父 div 中。这是你要找的吗？

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

.sentence {
  display:block;
  overflow:hidden;
}

.sentence:hover {
  color: green
}

.float {
  float: right;
}

.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>

【讨论】：

【解决方案3】：

试试这个 sn-p。

.parent {
  width: 200px;
  border: black 1px solid;
  overflow: hidden;
}
.sentence {
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}
.sentence:hover {
  color: green
}
.float {
  width: 50px;
  float: right;
}
.float:hover {
  color: red
}

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

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

【讨论】：