Here are the buttons I am working with -
<div class="nav nav-tabs " id="nav-tab" role="tablist">
<a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab" href="#" id="ps" role="tab" aria-selected="true">tab1</a>
<a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab" href="#" id="pi" role="tab" aria-selected="false">tab2</a>
<a style="text-decoration:none" class="nav-item nav-link" data-toggle="tab" href="#" id="ri" role="tab" aria-selected="false">tab3</a>
</div>
I also have 3 images that need to appear on hover for each tab, as mentioned above -
<div class="hide1"> <img src="img/image1.jpg" style="max-width:100%; max-height:100%; border: 1px solid #424242;"></div>
<div class="hide2"> <img src="img/image2.jpg" style="max-width:100%; max-height:100%; border: 1px solid #424242;"></div>
<div class="hide3"> <img src="img/image3.jpg" style="max-width:100%; max-height:100%; border: 1px solid #424242;"></div>
Here is the CSS code I am using for this functionality -
div.hide1 {
display: none;
}
a#ps:hover + div.hide1
{
display: block;
}
div.hide2 {
display: none;
}
a#pi:hover + div.hide2
{
display: block;
}
div.hide3 {
display: none;
}
a#ri:hover + div.hide3
{
display: block;
}