javascript - CSS：在x方向隐藏子元素的溢出，但允许在y方向的孙子元素溢出？

Question

因此，我尝试为用户将鼠标悬停在特定按钮上时创建一些工具提示。基本上，我将有许多选项卡（在此示例中，为简单起见，我只创建了两个），它们将水平滑入和滑出。因此，我想隐藏任何标签的内容，即translated either to the left or right of the #content element. To achieve this, I tried addingoverflow-x: hidden to the#slider` 元素。虽然这按预期工作，但当工具提示在 y 方向上溢出时，它也会隐藏工具提示（如果将鼠标悬停在前两行上，您可以看到这一点）。

这是我的代码。我希望我解释了我想要做的事情，尽管我认为如果我的解释不好，当你看到这个例子时应该很明显。

window.onload = function() {
  //populate l & r tab contents
  for (var n = 1; n <= 15; n++) {
    document.getElementById("l").insertAdjacentHTML("beforeEnd", "<p class='item tooltip'>L" + n + "<span class='tooltipText'>L" + n + "</span></p>")

    document.getElementById("r").insertAdjacentHTML("beforeEnd", "<p class='item tooltip'>R" + n + "<span class='tooltipText'>Tooltip R" + n + "</span></p>")
  }

  document.querySelector("#tab-wr p[tab='l']").addEventListener("click", function() {
    this.style.borderBottomColor = "green";
    document.querySelector("#tab-wr p[tab='r']").style.borderBottomColor = "";
    document.querySelector("#slider").style.transform = "translateX(0%)";
  })


  //ignore - messy code for changing tabs
  document.querySelector("#tab-wr p[tab='r']").addEventListener("click", function() {
    this.style.borderBottomColor = "green";
    document.querySelector("#tab-wr p[tab='l']").style.borderBottomColor = "";
    document.querySelector("#slider").style.transform = "translateX(-50%)";
  })
}

* {
  margin: 0;
  padding: 0;
  color: white;
  font-family: sans-serif;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#tab-wr {
  display: flex;
  width: 390px;
  line-height: 40px;
  margin-bottom: 10px;
}

#tab-wr p {
  flex-grow: 1;
  text-align: center;
  border-bottom: 2px solid #555;
  cursor: pointer;
}

#tab-wr p:hover {
  border-bottom-color: green;
}

#tab-wr p:not(:last-child) {
  margin-right: 10px;
}

#content {
  width: 390px;
  border: 1px solid #111;
  overflow-x: hidden;
}

#slider {
  width: 200%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transition: ease-in-out 0.3s all;
}

#l,
#r {
  display: grid;
  grid-template-columns: repeat(3, 1fr)
}

.item {
  width: 130px;
  line-height: 50px;
  background: #222;
  text-align: center;
  position: relative;
}

.tooltipText {
  display: none;
}

.tooltip:hover {
  background: #333;
  cursor: default;
}

.tooltip:hover .tooltipText {
  display: block;
  position: absolute;
  top: -150px;
  left: 0;
  background: #0075b9;
  width: 130px;
  height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltipText::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  margin-bottom: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #0075b9 transparent transparent transparent;
  z-index: 999;
}

<div id='tab-wr'>
  <p tab="l">Left Tab</p>
  <p tab="r">Right Tab</p>
</div>

<div id='content'>
  <div id='slider'>
    <div id='l'>
    </div>
    <div id='r'>
    </div>
  </div>
</div>

基本上，我想知道，我怎样才能让滑动标签和工具提示功能都工作？并且最好不使用 js 进行定位，理想情况下将工具提示保持为所需元素的子项（或至少是兄弟姐妹）以悬停。

谢谢

标签： javascripthtmlcss