CSS hover effect for multiple DIV s not working

Question

I'm trying to hide multiple <div> elements and when someone hover on a <li> item respective <div> to be display. So I have used a boostrap container and then had a row inside it and then row divided into <div class="col-2"> and <div class="col-10> where all <li> items to be in <div class="col-2"> and hidden <div>s to be <dic class="col-10">. So this is my code

 #divli01,#divli02,#divli03,#divli04,#divli05{
            display: none;
        }
        #li01:hover +#divli01{
            color: red;
            display: block;
        }
        #li02:hover +#divli02{
            color: red;
            display: block;
        }
        #li03:hover +#divli03{
            color: red;
            display: block;
        }
        #li04:hover +#divli04{
            color: red;
            display: block;
        }
        #li05:hover +#divli05{
            color: red;
            display: block;
        }
   
   

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
   <div class="row">
    <div class="col-2">
    <ul>
        <li id="li01">A</li>
        <li id="li02">B</li>
        <li id="li03">C</li>
        <li id="li04">D</li>
        <li id="li05">E</li>
        
    </ul>
    
    </div>
    <div class="col-10">
        
    <div id="divli01">
       <p> A section goes here</p>
         <p> A section goes here</p>
         <p> A section goes here</p>
         <p> A section goes here</p>
    </div>
    
    <div id="divli02">
       <p> B section goes here</p>
         <p> B section goes here</p>
         <p> B section goes here</p>
         <p> B section goes here</p>
    </div>
    
    <div id="divli03">
       <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
    </div>
    
    <div id="divli04">
       <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
    </div>
       <div id="divli05">
       <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
    </div>
    
    </div>
        </div>
        </div>

Initially I have hide all the <div> with css display:none and then Iam trying to show each div when user hover on a <li> item. But I think I have missed something. So could anyone please help on this.

Answer 1

I have added a class to ul element to select li elements easily, you can choose any other method as well.

let li = document.querySelectorAll('.unhover li');

function displayDiv(event) {
  // console.log(event.target.id);
  document.getElementById('div' + event.target.id).style.display = 'block';
  document.getElementById('div' + event.target.id).style.color = 'red';
}

function hideDiv(event) {
  // console.log(event.target.id);
  document.getElementById('div' + event.target.id).style.display = 'none';

}

li.forEach(item => {
  item.addEventListener('mouseenter', displayDiv);
  item.addEventListener('mouseleave', hideDiv);
});

#divli01,
#divli02,
#divli03,
#divli04,
#divli05 {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-2">
      <ul class="unhover">
        <li id="li01">A</li>
        <li id="li02">B</li>
        <li id="li03">C</li>
        <li id="li04">D</li>
        <li id="li05">E</li>

      </ul>

    </div>
    <div class="col-10" id="divs">

      <div id="divli01">
        <p> A section goes here</p>
        <p> A section goes here</p>
        <p> A section goes here</p>
        <p> A section goes here</p>
      </div>

      <div id="divli02">
        <p> B section goes here</p>
        <p> B section goes here</p>
        <p> B section goes here</p>
        <p> B section goes here</p>
      </div>

      <div id="divli03">
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
        <p> C section goes here</p>
      </div>

      <div id="divli04">
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
        <p> D section goes here</p>
      </div>
      <div id="divli05">
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
        <p> E section goes here</p>
      </div>

    </div>
  </div>
</div>