当我添加overflow时，overflow停止工作。

Question

​

.scrollable-items {
  height: 100px;
  overflow-x: unset;
  overflow-y: auto;
  width: 60px;
}
.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
  display: none;
}

.cx-mainnav:hover + .cx-mainnav-hoverlabel {
  opacity: 1;
  display: block;
}

<div class="scrollable-items">
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 1</div>
        <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 2</div>
        <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 3</div>
        <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 4</div>
        <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
      </div>
      <div class="cx-mainnav-hoverwrapper">
        <div class="cx-mainnav">Icon 5</div>
        <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
      </div>

​

基本上，我有一个垂直导航栏

在添加滚动条-y之前，我经常看到工具提示在图标左侧的元素上悬停。

但是，一旦我添加溢出-y作为自动，现在我不能看到工具提示在左边的图标。

在这种情况下，我想在y轴上添加滚动条，但当我在元素上方悬停时，我也希望在图标的左侧显示工具提示。目前，我不能同时做到这两件事。

Answer 1

​

.scrollable-items {
  min-height: 100px;
  overflow-x: unset;
  overflow-y: auto;
  width: 60px;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  left: 50px;
  opacity: 0;
  pointer-events: none;
  padding: 2px 3px;
  border-radius: 3px;
}

.cx-mainnav:hover + .cx-mainnav-hoverlabel {
  background-color: crimson;
  color: white;
  opacity: 1;
  display: block;
}

<div class="scrollable-items">
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 1</div>
          <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 2</div>
          <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 3</div>
          <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 4</div>
          <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
        </div>
        <div class="cx-mainnav-hoverwrapper">
          <div class="cx-mainnav">Icon 5</div>
          <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
        </div>
      </div>

​

Answer 2

你可以在悬停时解除溢出-y。

​

.scrollable-items {
  min-height: 300px;
  overflow-x: unset;
  overflow-y: auto;
  width: 50px;
}

.scrollable-items:hover {
  overflow-y: unset;
}

.cx-mainnav-hoverwrapper {
  position: relative;
}

.cx-mainnav-hoverlabel {
  display: inline;
  position: absolute;
  top: 0;
  left: 50px;
  margin-top: 10px;
  opacity: 0;
  pointer-events: none;
}

.cx-mainnav:hover+.cx-mainnav-hoverlabel {
  opacity: 1;
}

<div class="scrollable-items">
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 1</div>
    <div class="cx-mainnav-hoverlabel">Icon 1 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 2</div>
    <div class="cx-mainnav-hoverlabel">Icon 2 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 3</div>
    <div class="cx-mainnav-hoverlabel">Icon 3 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 4</div>
    <div class="cx-mainnav-hoverlabel">Icon 4 Tooltip</div>
  </div>
  <div class="cx-mainnav-hoverwrapper">
    <div class="cx-mainnav">Icon 5</div>
    <div class="cx-mainnav-hoverlabel">Icon 5 Tooltip</div>
  </div>

​

您必须决定这是否适合您的实际生活案例(例如，滚动条在悬停时消失)。

Answer 3

我希望这能回答你的问题。(注释部分总是打开的)

​

.scrollable-items {
  width: 100px;
  height: 90px;
  /* position: relative; */
  overflow-y: auto;
  /* to make it scrollable 'y' only */
  overflow-x: hidden;
  font-size: 1.5rem;
}

.cx-mainnav {
  /*position: relative;*/
  display: inline;
}

.cx-mainnav-hoverwrapper {
  /* position: relative; */
  position: absolute;
  visibility: hidden;
}

.cx-mainnav-hoverlabel {
  display: block;
  position: relative;
  font-size: 1.1rem;
}

.cx-mainnav:hover .cx-mainnav-hoverwrapper {
  visibility: visible;
  opacity: 1;
}

<div class="scrollable-items">
  <div class="cx-mainnav">
    <span>Icon 1</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 1 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 2</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 2 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 3</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 3 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 4</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 4 tooltip</span></span>
  </div>
  <div class="cx-mainnav">
    <span>Icon 5</span>
    <span class="cx-mainnav-hoverwrapper"><span class="cx-mainnav-hoverlabel">Icon 5 tooltip</span></span>
  </div>
</div>

​

您看到工具提示4和5的原因--稍微偏离位置--是因为实际的和伪的定位(也就是因为滚动)。