我有一个简单的投资组合项目，我想添加一个悬停效果，以显示信息，但悬停事件是不工作的。 我还尝试了jquery，但任何事件侦听器都不能工作
null
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>null
不使用javascript，您可以使用类的css hover事件，并在您的情况下设置inside的样式:
.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;
}
null
.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>