主页 / 问题 / 1277164
Accepted
ck1e
Asked:2022-05-02 01:27:04 +0000 UTC2022-05-02 01:27:04 +0000 UTC

如何将一个块与另一个块重叠

  • 772

您需要确保当您将鼠标悬停在 .item 块上时，会出现 .item__info 块并与下面的块 (.block) 重叠，并带有几个强制性条件

  1. .wrapper 应该有position: relative; overflow-x: hidden;
  2. .item 已设置块高度style="height: 40px"

.wrapper 是一种滑块，因此会有多个 .items，因此是overflow-x: hidden;必需的。并且需要高度，以便在悬停在目标上时底层元素不会“跳跃”

.wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
}

.item:hover .item__info {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
}
<div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
    <div class="item__info">
      <div>123</div>
      <div>456</div>
    </div>
  </div>
</div>

<div class="block">
  123123123123
</div>

javascript

1 个回答

  1. Best Answer

    overflow唉，由于会“切断”内容的功能，这无法实现。

    您可以建立一个集体农场，比如说这样的解决方案，但是只要.item内部没有计划几个就可以了.wrapper

    .wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
  /**/
  width: 100%;
  position: absolute;
  bottom: 0;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
  /**/
  position: relative;
}

.wrapper:hover ~ .block .item__info {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}
    <div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
  </div>
</div>

<div class="block">
  123123123123
  <div class="item__info">
    <div>123</div>
    <div>456</div>
  </div>
</div>

    如果计划好几个，那我们也采用JS。

    let wrapper = document.querySelector('.wrapper'),
    clone = document.querySelector('.item__info-clone');
    
wrapper.addEventListener('mouseenter', function(e) {
  if(e.target.classList.contains('item')) {
    clone.innerHTML = e.target.querySelector('.item__info').innerHTML; 
    clone.classList.add('-active');
  }
}, true);

wrapper.addEventListener('mouseleave', function(e) {
  if(e.target.classList.contains('item')) {
    clone.classList.remove('-active');
  }
}, true);
    .wrapper {
  position: relative;
  z-index: 0;
  overflow-x: hidden;
  overflow-y: visible;
  width: max-content;
}

.item {
  background: red;
  width: max-content;
  padding: 25px;
}

.item__name {
  margin-bottom: 15px;
}

.item__info {
  display: none;
}

.block {
  background: blue;
  width: 100px;
  margin-top: 5px;
  /**/
  position: relative;
}

.block .item__info-clone {
  opacity: 0;
  visibility: hidden;
  height: 0;
  display: none;
  background: green;
  /**/
  width: 100%;
  position: absolute;
  bottom: 0;
}

.block .item__info-clone.-active {
  opacity: 1;
  visibility: visible;
  height: auto;
  display: block;
}
    <div class="wrapper">
  <div class="item" style="height: 40px">
    <div class="item__name">Name</div>
    <div class="item__info">
      <div>123</div>
      <div>456</div>
    </div>
  </div>
  
  <div class="item" style="height: 40px">
    <div class="item__name">Name 2</div>
    <div class="item__info">
      <div>456</div>
      <div>789</div>
    </div>
  </div>
  
  <div class="item" style="height: 40px">
    <div class="item__name">Name 3</div>
    <div class="item__info">
      <div>ⅠⅡⅢ</div>
      <div>ⅣⅤⅥ</div>
    </div>
  </div>
</div>

<div class="block">
  123123123123
  <div class="item__info-clone"></div>
</div>

    • 2

相关问题