How to change background image on hover on other elements?

Question

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

you want to set the background image on hover for cell also? — Saravana, Apr 13 '18 at 07:07
Please include a reproducible example with both HTML and CSS. — Hidden Hobbes, Apr 13 '18 at 07:14

score 1 · Accepted Answer · answered Apr 13 '18 at 07:21

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>

score 0 · Answer 2 · answered Apr 13 '18 at 07:13

0

Try this

div:hover {
    background-color: green;
}

If this isn't what you were looking for just let me know

answered Apr 13 '18 at 07:13

Trenton Adams

44
4

score 0 · Answer 3 · answered Apr 13 '18 at 07:24

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.

How to change background image on hover on other elements?

3 Answers3