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.
3
Answers
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: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/leaveI have added a class to
ul
element to select li elements easily, you can choose any other method as well.You can also do this using jQuery.
Here is the link of codepen.
It’s something similar that you want…
Please review it. if it’s helpful for you.