How to make the: hover take all the LI

Question

How to make the: hover take all the LI

Navigation

#1 by (2 votes)

2

Business is as follows, I have a div that holds my li , and within these li has an image and three li with texts, my goal is to make, when the mouse is passed in % change, and the text also changes the color, even if you do not move the mouse over them, good and so for the image also when the mouse is passed through the texts, giving the li effect % in 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>

css

asked by anonymous 03.12.2017 / 01:12

1 answer

Manipulating a JSON with the GSON library Sorting object in javaScript

score 2 · Accepted Answer

Use the * wildcard to change the color of all child elements text from 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><ahref="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>

As the image is not a background , to change it, you will have to use JavaScript or jQuery.