Блог

Главная - Вопросы по программированию - CSS: скрыть переполнение ребенка в направлении x, но разрешить переполнение внука в направлении y?

CSS: скрыть переполнение ребенка в направлении x, но разрешить переполнение внука в направлении y?

#javascript #html #css

Вопрос:

Поэтому я пытаюсь создать несколько подсказок, когда пользователь наводит курсор на определенную кнопку. В принципе, у меня будет множество вкладок (в этом примере я создал только две для простоты), которые будут скользить по горизонтали внутрь и наружу. Из-за этого я хочу скрыть содержимое любой вкладки, которое является translated either to the left or right of the элементом # element. To achieve this, I tried adding переполнение содержимого-x: скрытый to the элемент#слайдер. Хотя это работает должным образом, он также скрывает всплывающие подсказки, когда они переполняются в направлении y (вы можете увидеть это, если наведете курсор на первые две строки).

Вот мой код. Надеюсь, я объяснил, что я пытаюсь сделать, хотя я думаю, что это должно быть довольно очевидно, когда вы видите пример, если мое объяснение плохое.

 window.onload = function() {
  //populate l amp; 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: defau<
}

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

Basically, I’m wondering, how can I have both the sliding tabs amp; tooltip features working? And preferably without using js for positioning and ideally keeping the tooltips as children (or at least siblings) of the desired element to have hovered.

Thanks

Метки: ,