Question

我是JavaScript的新手，所以请帮助。

我已将图片悬停在CSS中，但我需要在此悬停中添加内容中的互动。所以，我使用了JavaScript。它按我想要的方式工作但只有一次，我必须刷新浏览器。 Here is a CodePen which shows how it works.

还代码：

var content = document.getElementById('fav-project-content');
var imgContent = document.getElementById('fav-project-img');

imgContent.addEventListener('mouseover', rev);
imgContent.addEventListener('mouseout', hid);

function rev() {
  if (content.className === "hide") {
    content.className = "";
  }
  TweenMax.from(content, 0.5, {
    x: 1500,
    opacity: 0,
    ease: Quad.easeOut
  });
};

function hid() {
  TweenMax.to(content, 0.5, {
    x: 1500,
    opacity: 0,
    ease: Quad.easeOut
  });
};

.content {
  margin-top: 19vw;
  margin-bottom: 5vw;
}
#fav-project-img {
  background-image: url(http://dannnk.com/test/images/spiro-bw.jpg);
  background-size: cover;
  position: relative;
  width: 30%;
  display: inline-block;
  min-height: 578px;
  -webkit-transition: all 0.5s cubic-bezier(.78, .54, .47, .88);
  -moz-transition: all 0.5s cubic-bezier(.78, .54, .47, .88);
  transition: all 0.5s cubic-bezier(.78, .54, .47, .88);
}
#fav-project-img:hover {
  background-image: url(http://dannnk.com/test/images/spiro.jpg);
  width: 42%;
  margin-left: -1%;
}
#fav-project-content {
  background-color: #f7f0e8;
  position: relative;
  display: inline-block;
  float: right;
  width: 59%;
  height: 578px;
}
#fav-project-content.hide {
  display: none;
}

<div class="content">
  <div id="fav-project-img"></div>
  <div id="fav-project-content" class="hide"></div>
</div>

正如我写的那样，我是JavaScript的新手。可能，这是我的代码问题。你能告诉我什么是错的吗？

Answer 1

它为我工作。顺便说一句，你可以实现相同的没有JavaScript。使用css，使用：hover选择器设置图像容器和图像的样式，对于动画，您可以使用过渡属性。例如：

.image-container{
  transition: all .3s ease;
  width: 200px;
}
.image-container:hover{
  width: auto;
}
.image{
  -webkit-filter: saturation(0);
  transition: all .3s ease;
}
.image-container:hover .image{
  -webkit-filter: saturation(1);
}

Mouseover事件工作正常，但一次

1 个答案: