javascript - 鼠标悬停时滑出 div 标签

Question

我正在尝试创建一个动画，让 div 在鼠标悬停时滑出，并保持滑出直到鼠标移出。实现这一目标的最佳方法是什么？抱歉，我是 React 新手。这是我的通用代码。抱歉格式不好。

return (
    <div id="homeDiv">
    <div>
        <Navbar />

    </div>

    <div className="portStyle">

    </div>
    <div className="cvStyle1">

    </div>
    <div className="nameStyle">
        <h1 >Lin</h1>
        <h1 >Edmund</h1>
    </div>
    </div>
)

和相关的CSS：

#homeDiv {
    overflow-y: hidden;
    overflow-x:hidden;
}
.nameStyle  {
    height: 100vh;
    width: 30%;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    
}

.portStyle  {
    height: 100vh;
    width: 20%;
    position: relative;
    float: right;
    background-color: #000;
}

.cvStyle1 {
    height: 100vh;
    width: 20%;
    position: relative;
    float: right;
    background-color: #ccc;
    
}

不确定我是否应该使用 CSS 动画或者是否应该为此使用 React 动画，因为我知道 CSS 不支持 onMouseOver，除非有一些解决方法。Navbar 元素只是我对齐到屏幕右侧的导航栏，宽度为 20%，高度为 100vh。

标签： javascripthtmlcssreactjsanimation

Answer 1

你在寻找这样的东西吗？

.container {
  position: relative;
  width: 70%;
}
.image { 
  width: 100%;
}
.overlay {
  position: absolute;
  bottom: 0;
  left: 100%;
  right: 0;
  background-color: darkcyan;
  overflow: hidden;
  width: 0;
  height: 100%;
  transition: .5s ease;
}
.container:hover .overlay {
  width: 100%;
  left: 0;
}
.text {
  color: white;
  font-size: 20px;
  position: absolute;
  padding: 10px;
  white-space: wrap;
}

<div class="container">
  <img src="https://pixlr.com/photo/image-design-11-1-pw.jpg" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
  </div>
</div>