Question

两个子元素位于固定宽度div内。

第一个元素是文本句子而不是长，因此使用了overflow: hidden规则。

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

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

测试鼠标悬停和点击：

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

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

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

有没有办法确保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: right;
  z-index: 10;
  position:relative;
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 3

试试这个代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Floated元素不接收鼠标事件

3 个答案: