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

Question

我知道以前有人问过这样的问题，但不一样，我在其他问题下找不到答案。请注意，我是初学者，所以不要因为我什么都不知道而评判我很抱歉，如果真的有这样的问题和答案，我找不到它，如果你链接它，我会很感激:)

所以这是这个简单的代码

这是页面上的div

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

在这个div中有一个table，有很多单元格，也包括这些

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

所以我的问题是：当我将鼠标悬停在这些单元格上时，整个 div 的背景图像都会发生变化，而不仅仅是单元格的背景图像会发生变化？我可以在 [=24 中做到这一点吗？ =] 还是它也需要一些脚本代码？感谢您提前提供帮助 comments/answers！这些所有单元格都在页面上的 div 中，我想要的是当我将鼠标悬停在 Assault 单元格上时，当前背景图像会更改为不同的

Answer 1

试试这个

div:hover {
    background-color: green;
}

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

Answer 2

试试这个。

.XY {
    display: block;
    position: static;
    background-image: url(https://www.w3schools.com/howto/img_fjords.jpg);
    background-repeat: no-repeat;
    color: #fff;
    background-size: cover;
}

.XY:hover {
    background-image: url(https://www.w3schools.com/w3css/img_lights.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

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

<div class="XY">
  <table>
    <tr>
      <td id="XY">Table Cell</td>
      <td id="XY">Table Cell</td>
    </tr>
  </table>
</div>

Answer 3

您可以尝试为该单元格提供与其他单元格不同的 div class，然后为 exp：

.table.some_style td{
   background-color: your color;
   }
.table.some_style td:hover{
   background-image: your image;
   }

如果你想让很多单元格产生那种效果，你可以只给它们相同的 class。你必须尝试它是否适合你。

请告诉我它是否有效。

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

How to change background image on hover on other elements?

html

css

background-image

hover