Twitter Bootstrap Question posted in

CSS hover effect for multiple DIV s not working-Twitter bootstrap

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.

Tags:

3

Answers


  1. 0

    If you don’t want to use Javascript, then you’ll need to change the html structure to be able to use CSS for that task. You can do this by nesting your col-2 & col-10 divs inside the <li> element. Then using css u can set:

    li:hover .col-10 {display: block}

    If you don’t want to change html structure, then you’ll use Javascript to add event listeners to <li> elements (‘mouseenter’ & ‘mouseleave’) so that you can add/remove a class to the corresponding div on mouse enter/leave

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    You can also do this using jQuery.

    Here is the link of codepen.
    It’s something similar that you want…

    [https://codepen.io/multanisadik/pen/jjvrqq]

    Please review it. if it’s helpful for you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search