Search code examples
htmlcsshoverbackground-image

How to change background image on hover on other elements?

enter image description hereI 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

Solution

  • 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>