1

悬停时我想要一个 div，另一个 div 滑过它。我有新的 div 可以滑过，但是每当鼠标开始悬停在新的 div 上时，它就会开始闪烁

.grid-container {
  display: grid;
  justify-content: stretch;
  grid-template-columns: 33vw 33vw 33vw;
  grid-template-rows: 45vh 45vh 45vh;
  grid-column-gap: 0.33vw;
  grid-row-gap: 0.33vh;
  justify-items: stretch;
  align-items: stretch;
}

.ProjectGrid-main {
  background-color: #282c34;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  cursor: default;
  overflow: hidden;
}

.ProjectGrid-Image {
  display: flex;
  flex: 1;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.ProjectGrid-details {
  width: 0%;
  height: 100%;
  color: transparent;
  transition: width 1s ease-in-out;
}

.ProjectGrid-main :hover~.ProjectGrid-details {
  color: white;
  width: 100%;
  border-radius: 0.5vw;
  background-color: rgba(0, 128, 128, 0.8);
}
<div class="grid-container">
  <div class='ProjectGrid-main'>
    <div class='ProjectGrid-Image'>
      <img ref="image" src={} alt="" width="50%" height="75%" />
    </div>
    <div class='ProjectGrid-details'>
      <h1>Title1</h1>
      <p>Paragraph1</p>
    </div>
  </div>

  <div class='ProjectGrid-main'>
    <div class='ProjectGrid-Image'>
      <img ref="image" src={} alt="" width="50%" height="75%" />
    </div>
    <div class='ProjectGrid-details'>
      <h1>Title2</h1>
      <p>Paragraph2</p>
    </div>
  </div>
</div>

这是 Codepen https://codepen.io/Maskedman99/pen/NWPQKdd?editors=1100请尝试仅使用 CSS 找到解决方案

4

1 回答 1

4

删除波浪号组合器，让您的:hover伪类与 projectgrid-main 对齐.ProjectGrid-main:hover .ProjectGrid-details

使用组合器，它对您的效果起到条件作用。当您的鼠标离开网格主时，该条件不再成立。它试图缩回，但你的鼠标仍然悬停在主网格上，然后它试图扩展自身（来回），这就是你得到闪烁的原因。

IMO：您似乎希望其他网格覆盖在图像上而不是挤压图像。position:relative在父网格和子网格上使用position:absolute，带有right:定位。此外，将父母设置overflow为隐藏以使其正常工作。

.grid-container {
    display: grid;
    justify-content: stretch;
    grid-template-columns: 33vw 33vw 33vw;
    grid-template-rows: 45vh 45vh 45vh;
    grid-column-gap: 0.33vw;
    grid-row-gap: 0.33vh;
    justify-items: stretch;
    align-items: stretch;
  }
  
  .ProjectGrid-main {
    /*changes here*/
    background-color: #282c34;
    border-radius: 0.5vw;
    display: flex;
    justify-content: center;
    cursor: default;
    overflow: hidden;
    position: relative;
  }
  
  .ProjectGrid-Image {
    display: flex;
    flex: 1;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  
  .ProjectGrid-details {
    /*changes here*/
    width: 100%;
    height: 100%;
    position:absolute;
    border-radius: 0.5vw;
    background-color: rgba(0, 128, 128, 0.8);
    right:-100%;
    transition:.5s;
  }
  
  .ProjectGrid-main:hover .ProjectGrid-details {
    /*changes here*/
    right:0px;
    transition:.5s;
  }
<div class="grid-container">
          
          <div class='ProjectGrid-main'>
            <div class='ProjectGrid-Image'>
              <img ref="image" src={} alt="" width="50%" height="75%"/>
            </div>
            <!--hover-->
            <div class='ProjectGrid-details'>
              <h1>Title1</h1>
              <p>Paragraph1</p>
            </div>  
            <!--hover-->
          </div>
        
          <div class='ProjectGrid-main'>
            <div class='ProjectGrid-Image'>
              <img ref="image" src={} alt="" width="50%" height="75%"/>
            </div>
            <div class='ProjectGrid-details'>
              <h1>Title2</h1>
              <p>Paragraph2</p>
            </div>  
          </div>
        </div>

于 2020-02-01T12:57:34.100 回答