Html 如何更改悬停在其他元素上的背景图像？

我知道以前有人问过这样的问题，但情况不同，我在其他问题下找不到答案。请注意，我是一个初学者，所以不要因为我不懂什么而评判我 很抱歉，如果真的有这样一个问题，我找不到答案，那么如果您将其链接，我将不胜感激：）

这是一个简单的代码

这是页面上的一个div

.XY{
display:block;
position:static;
background-image: url(XY.jpg);
background-repeat:repeat-x,;
}

在这个div中有一个表，有许多单元格，包括这些单元格

#XY,#XY,#XY,#XY{
display:table-cell;
height:40px;
width:200px;
margin:auto;
text-align:center;
}

所以我的问题是：当我在这些单元格上悬停时，如何实现这一点，然后整个div的背景图像会发生变化，而不仅仅是单元格的背景图像会发生变化？我可以仅用css来实现这一点，还是还需要一些脚本代码？ 感谢您提前提供任何有用的意见/答案！ 这些所有单元格都在页面上的一个div中，我想要的是当我悬停在攻击单元格上时，当前背景图像会变为另一个

试试这个

div:hover {
    background-color: green;
}

如果这不是您想要的，请告诉我试试这个

.XY{
显示：块；
位置：静态；
背景图片：url(https://www.w3schools.com/howto/img_fjords.jpg);
背景重复：无重复；
颜色：#fff；
背景尺寸：封面；
}
.XY:悬停{
背景图片：url(https://www.w3schools.com/w3css/img_lights.jpg);
背景重复：无重复；
背景尺寸：封面；
}
#XY，
#XY，
#XY，
#XY{
显示：表格单元格；
高度：40px；
宽度：200px；
保证金：自动；
文本对齐：居中；
颜色：#000；
字体大小：粗体；
}

表单元格
表单元格

您可以尝试为该单元格指定与其他单元格不同的div类，然后为exp：

.table.some\u-style td{
背景色：你的颜色；
}
.table.some_风格td:悬停{
背景图像：你的图像；
}

是否也要将单元格的背景图像设置为悬停？请提供一个HTML和CSS均可复制的示例。