How to change background image on hover on other elements? [duplicate] - html

Question

This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 4 years ago.
I know that questions like this had been asked before, but it's different, and I couldn't find an answer for it under other question. Note that I'm a beginner, so don't judge me for not knowing something
I'm sorry if there actually is a question like this with an answer,I couldn't find it, then I would appriciate if you linked it :)
So Here's this simple code
This is a div on the page
.XY{
display:block;
position:static;
background-image: url(XY.jpg);
background-repeat:repeat-x,;
}
In this div there is a table, with many cells, including these ones too
#XY,#XY,#XY,#XY{
display:table-cell;
height:40px;
width:200px;
margin:auto;
text-align:center;
}
So my question is: How could I achieve that when I hover on those cells, then the background-image of the entire div changes, not only the cell's?Can I do this in css only or it requires some script codes too?
Thanks for any helpful comments/answers in advance!
Those all cells are in a div on the page, and What I want is when I hover on the Assault cell, then the current background image changes to a different one

Answer 1

Try this.
.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 2

Try this
div:hover {
background-color: green;
}
If this isn't what you were looking for just let me know

Answer 3

You could try giving that cell a different div class than the others and then for exp:
.table.some_style td{
background-color: your color;
}
.table.some_style td:hover{
background-image: your image;
}
If you want to have many cells to have tthat effect you can just give them the same class.
You´ll have to try if it works for you.
Please let me know if it worked or not.