Question

我有一个简单的投资组合项目，我想为此添加一个悬停效果以显示信息，但是悬停事件不起作用。我也尝试了jquery，但是任何事件侦听器都不起作用

let portfolioImage = document.getElementsByClassName('single-portfolio')[0];
let portfolioInfo = portfolioImage.getElementsByClassName('single-portfolio-details')[0];

portfolioImage.addEventListener('mouseover', () => {
  portfolioInfo.style.transform = 'translatex(0px)';
  portfolioInfo.style.opacity = '1';
});
portfolioImage.addEventListener('mouseout', () => {
  portfolioInfo.style.transform = 'translatex(36px)';
  portfolioInfo.style.opacity = '0';
});

.single-portfolio {
  width: 200px;
  position: relative;
}

.single-portfolio-details {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(200px);
  transition: all 0.5s ease-in-out;
}

<div class="single-portfolio" onclick="function f(){console.log('.....')}">
  <img src="img/آنلاین شو.jpg" alt="لوگوی آنلاین شو">
  <div class="single-portfolio-details">
    <h1>اسم کار</h1>
    <p>بیشتر بدانید</p>
  </div>
</div>

Answer 1

您可以使用css hover事件代替该类，并根据情况设置内部样式：

.single-portfolio:hover > .single-portfolio-details {
  transform: translatex(0px);
  opacity: 1;
}

并添加到原始CSS

.single-portfolio-details {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translatex(36px); /*This line, so when not hovering, it uses this value*/
  transform: translateY(200px);
  transition: all 0.5s ease-in-out;
}

.single-portfolio {
  width: 200px;
  position: relative;
}

.single-portfolio:hover > .single-portfolio-details {
  transform: translatex(0px);
  opacity: 1;
}

.single-portfolio-details {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translatex(36px);
  transform: translateY(200px);
  transition: all 0.5s ease-in-out;
}

<div class="single-portfolio" onclick="function f(){console.log('.....')}">
  <img src="img/آنلاین شو.jpg" alt="لوگوی آنلاین شو">
  <div class="single-portfolio-details">
    <h1>اسم کار</h1>
    <p>بیشتر بدانید</p>
  </div>
</div>

悬停事件侦听器，任何事件侦听器均无法正常工作

1 个答案: