Fri. Jun 2nd, 2023

[ANSWERED] javascript – hover event listener and any event listener is not working

By

Nov 20, 2022 css, html, javascript

Solution 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;
}

and add to your original 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>

Problem :

I have a simple portfolio item and I want to add a hover effect to this for showing information but hover event is not working.
I also tried jquery but any event listener is not working

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>

Comments

Comment posted by yergo

look for css:hover, also I would work a bit with w3c validator, because I am suspicious about nonascii characters inside html properties.

By

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

Nov 20, 2022

[ANSWERED] html – How to include a clickable image behind a link

Nov 20, 2022

[ANSWERED] html – Move list item to the left in header/navigation menu

Nov 20, 2022