Javascript 悬停事件侦听器，任何事件侦听器都不工作

我有一个简单的公文包项目，我想添加一个悬停效果来显示信息，但悬停事件不起作用。 我也尝试了jquery，但任何事件侦听器都无法工作

let-portfolioImage=document.getElementsByClassName（'single-portfolio'）[0]；
让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'；
});
。单一投资组合{
宽度：200px；
位置：相对位置；
}
.单一投资组合详情{
宽度：200px；
高度：200px；
位置：绝对位置；
左：0；
排名：0；
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
不透明度：0；
变换：translateY（200px）；
过渡：所有0.5s缓进缓出；
}

اسم کار
بیشبد

不使用javascript，您可以为类使用css悬停事件，并根据您的情况设置内部的样式：

。单个公文包：hover>。单个公文包详细信息{
转换：translatex（0px）；
不透明度：1；
}

并添加到原始css中

。单一投资组合详细信息{
宽度：200px；
高度：200px；
位置：绝对位置；
左：0；
排名：0；
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
不透明度：0；
transform:translatex（36px）；/*这一行，所以当不悬停时，它使用这个值*/
变换：translateY（200px）；
过渡：所有0.5s缓进缓出；
}


。单一投资组合{
宽度：200px；
位置：相对位置；
}
.single portfolio:hover>。single portfolio详细信息{
转换：translatex（0px）；
不透明度：1；
}
.单一投资组合详情{
宽度：200px；
高度：200px；
位置：绝对位置；
左：0；
排名：0；
显示器：flex；
柔性流动：柱；
对齐项目：居中；
证明内容：中心；
不透明度：0；
转化：translatex（36px）；
变换：translateY（200px）；
过渡：所有0.5s缓进缓出；
}

اسم کار
بیشبد

查找css:hover，我也会使用w3c验证程序，因为我怀疑html属性中的非ASCI字符。