Javascript Img&x2B；一些隐藏的文本，在它上面悬停后，img应该变大，文本应该变可见

我尝试了

css

和

javascript

，虽然效果不错，但不是很好。当位于

img

正前方的文本变为可见时，图像将不再悬停并保持较小。。。它开始闪烁

你知道我能做什么吗

displayDotTextonHover=函数displayDotTextonHover（）{
const purpleDot=document.querySelector（“.bucketlistimg”）；
purpleDot.addEventListener（“mouseover”，函数（）{
document.querySelector（“.bucketlistimg”）.style.transform=“scale（1.5）”；
document.getElementById（“myBucketList”）.style.visibility=“visible”；
});
purpleDot.addEventListener（“mouseout”，函数（）{
document.querySelector（“.bucketlistimg”）.style.transform=“scale（1）”；
document.getElementById（“myBucketList”）.style.visibility=“hidden”；
});
};
/*
.菜单img：悬停{
光标：指针；
转换：比例（1.5）；
}
/*.menu img:悬停~#myBucketList{
能见度：可见；
光标：指针；
}*/

存储桶列表
您可以在没有javascript的情况下完成

评论更新

如果文本位于图像顶部

使图像容器适合内容，例如使用
display:inline块并不是在图像悬停上进行修改，而是在容器悬停上进行修改

看这个片段


.bucketList{
位置：相对位置；
显示：内联块；
}
.bucketList:hover.image{
光标：指针；
转换：比例（1.5）转换（10%，0）；
}
.bucketList*{
位置：绝对位置；
}
.形象{
宽度：200px；
高度：100px；
排名：0；
左：0；
}
#myBucketList{
可见性：隐藏；
顶部：30px；
左：70像素；
空白：nowrap；
背景色：浅绿色；
}
.bucketList:悬停#我的bucketList{
能见度：可见；
光标：指针；
线高：1.5；
}

桶列表
谢谢，但是如果文本位于图像顶部，它是否仍然适用于您？这就是我面临的问题。图像的悬停效果停止。。。