hover 事件監聽器和任何事件監聽器不工作

Question

我有一個簡單的投資組合項目，我想為此添加一個 hover 效果以顯示信息，但 hover 事件不起作用。 我也試過 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

Instead of using javascript, you can use the css hover event for the class and set the styles of inside, in your situation:

.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>