How to get :Houver to pick up on all LI

Question

Here’s the deal, I got a div that holds my li, and within those li has an image and three li with texts, my goal is to make sure that when the mouse is passed on top of that li, the image change giving an effect hover and the text also change the color, even not passing the mouse over them, good and so to the image also when passed the mouse by the texts, giving the effect hover in the images

<ul>
   <li>
      <a href="javascript:void(0);">
         <div class="box">
            <ul>
               <li><img src="images/fundo.png" border="0"/></li>
               <li><h1>FUNDOS</h1></li>
               <li><span>FUNDOS PARA XAT</span></li>
               <li><a href="#">VER MAIS</a></li>
            </ul>
         </div>
      </a>
   </li>
</ul>

<style>
ul li{
   float:left;
}
ul li .box{
   width: 200px;
   height:200px;
}
ul li .box ul li img{
   width: 100%;
   height:100%;
}
.box ul li:hover  img {
   background: url(../images/fundo-hover.png) no-repeat;
}
.box ul li:hover h1,
.box ul li:hover span,
.box ul li:hover a{
   color: red;
}
</style>

Answer 1

Use the joker * to change the color of the whole text of the child elements of the div .box:

$('.box').on('mouseover mouseleave', function(e){
  $(this).find('img').attr('src', e.type == 'mouseover' ? 'https://images-na.ssl-images-amazon.com/images/I/41n3kSb1zvL.jpg' : 'https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg');
});

ul li{
   float:left;
}
ul li .box{
   width: 200px;
   height:200px;
}
ul li .box ul li img{
   width: 100%;
   height:100%;
}

.box:hover * {
   color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li>
      <a href="javascript:void(0);">
         <div class="box">
            <ul>
               <li><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" border="0"/></li>
               <li><h1>FUNDOS</h1></li>
               <li><span>FUNDOS PARA XAT</span></li>
               <li><a href="#">VER MAIS</a></li>
            </ul>
         </div>
      </a>
   </li>
</ul>

How the image is not a background, to change it, you will need to use Javascript or jQuery.