Question

我有一个保存工作图像的容器。将鼠标悬停在图像上时，如何使用JS在图像上弹出按钮和一些其他信息。

我尝试使用CSS和hover标记，但是它将在图像下方（而不是图像上方）应用我需要的效果。该页面是HTML，带有CSS，唯一的JS代码将实现此效果。该站点是我的作品集，因此每个图像都不同，但类都相同。以下代码是原始代码无效的代码。如果您能告诉我如何正确执行此操作，我将非常感谢，谢谢。

我没有以前尝试使用的代码，因为尝试了很多没有意义的代码。当我尝试其他解决方案时，我将编辑问题，然后发布失败的尝试或成功的尝试。

这是一个<a href="https://jsfiddle.net/mno2fjek/">JSFiddle </a>链接

Answer 1

欢迎使用StackOverflow！

所以似乎您只想使用JavaScript作为后备，因为您无法使CSS正常工作。我不建议这样做，因为如果您不使用Polyfill，可能会在浏览器和浏览器版本之间遇到各种兼容性问题。

要在CSS中执行此操作，我建议为每个工作项创建一个容器。在我的示例中，我创建了一个.item类，并使用该类包含图像和文本。创建完之后，我们现在可以在每个:hover上寻找一个.item，并使用它来修改.item内部的元素。

让我知道您是否需要我澄清我的解释的任何部分，或者我误解了您问题的任何部分。

.item {
  width: 50%;
  margin: 0 auto;
}

.wrapper {
  text-align: center;
}

.work_container {
  display: inline-block;
  position: relative;
  /* width: 1200px; Removed for testing */
  height: 100%;
  text-align: center;
}

.work_title {
  display: inline-block;
  width: 100%; /* Changed for testing */
  height: 30px;
  position: relative;
  top: 30px;
  font-family: 'Montserrat', sans-serif;
  font-size: 28px;
  font-weight: 500;
  color: black; /* Changed for testing */
  
  /* Used for the animation */
  opacity: 0;
  transition: 0.3s;
}

.work-hub {
  width: 100%; /* Added for testing */
  position: relative;
  text-align: center;
  margin-top: 50px;
  margin-bottom: 50px;
  -webkit-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
  -moz-box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
  box-shadow: 0px 20px 36px -3px rgba(0, 0, 0, 0.34);
}

/* Run the hover on the container */
.item:hover .work_title {
  opacity: 1;
}

<main>
  <div class="wrapper">
    <div class="work_container">
      <div class="item">
        <h1 class="work_title">Logo Visualisation</h1>
        <img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
      </div>
      <div class="item">
        <h1 class="work_title">Rock Banner</h1>
        <img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
      </div>
      <div class="item">
        <h1 class="work_title">Forest Fire</h1>
        <img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
      </div>
      <div class="item">
        <h1 class="work_title">Beach Body</h1>
        <img class="work-hub" src="https://images-na.ssl-images-amazon.com/images/I/51IwmuOPQyL._SL1052_.jpg" alt="Work Image">
      </div>
    </div>
  </div>
</main>

如何使用JS制作容器动画

1 个答案: