如何更改悬停在其他元素上的背景图像？ [复制]答案

【问题标题】：How to change background image on hover on other elements? [duplicate]如何更改悬停在其他元素上的背景图像？ [复制]
【发布时间】：2018-09-23 11:15:39
【问题描述】：

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

下面是这个简单的代码

这是页面上的一个 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 中执行此操作，还是也需要一些脚本代码? 提前感谢您提供任何有用的 cmets/答案！那些所有的单元格都在页面上的一个 div 中，我想要的是当我将鼠标悬停在 Assault 单元格上时，当前的背景图像会变为不同的背景图像

【问题讨论】：

您还想为单元格设置悬停时的背景图片吗？
请包含一个可重现的 HTML 和 CSS 示例。

标签： html css hover background-image

【解决方案1】：

试试这个

div:hover {
    background-color: green;
}

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

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

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

如果你想让很多单元格产生这种效果，你可以给它们同一个类。如果它适合您，您将不得不尝试。

请让我知道它是否有效。

【讨论】：