How to make 2 different div elements color on Hover

1

I have a div with text inside that says “1”, When the user hovers over any of the

tags i want both of them to turn blue, background also. how?.
Capturefreeca
Capturefreeca698×249 8.01 KB

try this code ! : ) HERE–> https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic 
<style>

.alltextsize a{text-decoration: none;
display: block !important ;
font-family: sans-serif;}

.rank{ 
display: block !important ;
font-weight: 800 ;
font-family: sans-serif ;
border: 4px solid grey ;
padding-left: 5.4px ;
    width: 16.4px;
    display: inline-block;
    height: 19.1px;
    float: left;
    font-size: 19px;
    margin-right: 6.4px;
    font-weight: bold;
    color: red;}
    
    .top100rank {
    display: block !important ;
  border-radius: 14px 14px 0px 0px;
    border: 1px solid blue;
    box-shadow: 0 0 8.5px #343434;
border-top: 8.5px solid blue !important;
background: #f7f7f7 !important;
    padding: 18px;}


.top100 li {
display: block !important ;
border: 3px solid grey ;
margin-bottom: 2px;
    overflow: hidden;
    padding: 6px 4px; }
    

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
html
    
</style> 


<section class="alltextsize">
<section class="top100" 
<div class="textwidget"><ul class="top100rank">
<li class="clearfix">


    <span class="rank">1</span>
    <div>
      <div>Picture 1</div>              
    </div>
</li>

</section>
2

All you have to do is select the top container, and on hover set the color to blue, so that the inner elements will inherit it.

For the rank however, since you specified the color, you should specifically select it.

This code should be enough:

.alltextsize:hover {
  color: blue;
}

.alltextsize:hover .rank {
  color: blue;
}

NOTE: your HTML code is messy and missing some closing tags. Mind that as well

1 Like